/*
 * CineLog — Public Stylesheet
 * Styles de base pour tous les composants front-end.
 * Le thème peut surcharger n'importe quelle règle.
 */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
    --cl-primary:       #e50914;   /* Rouge Netflix-esque */
    --cl-primary-dark:  #b20710;
    --cl-bg:            #141414;
    --cl-bg-card:       #1f1f1f;
    --cl-text:          #e5e5e5;
    --cl-text-muted:    #808080;
    --cl-border:        #333;
    --cl-star-on:       #f5c518;
    --cl-star-off:      #444;
    --cl-radius:        6px;
    --cl-radius-lg:     12px;
    --cl-transition:    0.2s ease;
    --cl-shadow:        0 4px 20px rgba(0,0,0,0.4);
}

/* ─── Bouton Watchlist ──────────────────────────────────────────────────── */
.cl-watchlist-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.55rem 1.2rem;
    border:          2px solid var(--cl-primary);
    border-radius:   var(--cl-radius);
    background:      transparent;
    color:           var(--cl-primary);
    font-weight:     600;
    cursor:          pointer;
    transition:      background var(--cl-transition), color var(--cl-transition);
}

.cl-watchlist-btn:hover,
.cl-watchlist-btn--active {
    background: var(--cl-primary);
    color:      #fff;
}

/* Dropdown de statut */
.cl-watchlist-dropdown {
    position:   relative;
    display:    inline-block;
}

.cl-watchlist-dropdown__menu {
    display:          none;
    position:         absolute;
    top:              100%;
    left:             0;
    z-index:          100;
    background:       var(--cl-bg-card);
    border:           1px solid var(--cl-border);
    border-radius:    var(--cl-radius);
    box-shadow:       var(--cl-shadow);
    min-width:        150px;
    overflow:         hidden;
}

.cl-watchlist-dropdown:hover .cl-watchlist-dropdown__menu,
.cl-watchlist-dropdown__menu:hover {
    display: block;
}

.cl-watchlist-dropdown__menu [data-status] {
    display:      block;
    width:        100%;
    padding:      0.5rem 1rem;
    border:       none;
    background:   transparent;
    color:        var(--cl-text);
    text-align:   left;
    cursor:       pointer;
    transition:   background var(--cl-transition);
}

.cl-watchlist-dropdown__menu [data-status]:hover,
.cl-watchlist-dropdown__menu .cl-watchlist-status--current {
    background:  var(--cl-primary);
    color:       #fff;
}

/* ─── Notation étoiles ──────────────────────────────────────────────────── */
.cl-rating-widget {
    display:     flex;
    gap:         0.2rem;
    align-items: center;
}

.cl-star {
    background: none;
    border:     none;
    font-size:  1.4rem;
    color:      var(--cl-star-off);
    cursor:     pointer;
    transition: color var(--cl-transition), transform var(--cl-transition);
    padding:    0;
    line-height: 1;
}

.cl-star--active,
.cl-star--hover {
    color:     var(--cl-star-on);
    transform: scale(1.15);
}

.cl-avg-rating {
    font-weight: 700;
    font-size:   1.2rem;
    color:       var(--cl-star-on);
}

.cl-rating-count {
    color:      var(--cl-text-muted);
    font-size:  0.85rem;
}

/* ─── Bouton Like ───────────────────────────────────────────────────────── */
.cl-like-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          0.35rem;
    padding:      0.45rem 1rem;
    border:       2px solid var(--cl-border);
    border-radius: 50px;
    background:   transparent;
    color:        var(--cl-text-muted);
    cursor:       pointer;
    transition:   all var(--cl-transition);
    font-size:    0.9rem;
}

.cl-like-btn:hover { border-color: #e75480; color: #e75480; }

.cl-like-btn--active {
    border-color: #e75480;
    background:   #e75480;
    color:        #fff;
}

/* ─── Recherche ─────────────────────────────────────────────────────────── */
.cl-search-wrapper {
    position: relative;
    width:    100%;
    max-width: 500px;
}

.cl-search-input {
    width:         100%;
    padding:       0.6rem 1rem;
    border:        2px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background:    var(--cl-bg-card);
    color:         var(--cl-text);
    font-size:     1rem;
    outline:       none;
    transition:    border-color var(--cl-transition);
}

.cl-search-input:focus { border-color: var(--cl-primary); }

.cl-search-results {
    display:          none;
    position:         absolute;
    top:              calc(100% + 4px);
    left:             0;
    right:            0;
    z-index:          200;
    background:       var(--cl-bg-card);
    border:           1px solid var(--cl-border);
    border-radius:    var(--cl-radius);
    box-shadow:       var(--cl-shadow);
    max-height:       350px;
    overflow-y:       auto;
}

.cl-search-result {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.6rem 1rem;
    text-decoration: none;
    color:          var(--cl-text);
    border-bottom:  1px solid var(--cl-border);
    transition:     background var(--cl-transition);
}

.cl-search-result:last-child { border-bottom: none; }
.cl-search-result:hover { background: rgba(255,255,255,0.05); }

.cl-search-result img {
    width:         40px;
    height:        55px;
    object-fit:    cover;
    border-radius: 3px;
    flex-shrink:   0;
}

.cl-search-result__title { font-weight: 600; display: block; }
.cl-search-result__type  { font-size: 0.78rem; color: var(--cl-text-muted); display: block; }

.cl-search-result--add {
    color:       var(--cl-primary);
    font-weight: 600;
    justify-content: center;
}

/* ─── Cards de contenu ───────────────────────────────────────────────────── */
.cl-card {
    background:    var(--cl-bg-card);
    border-radius: var(--cl-radius-lg);
    overflow:      hidden;
    transition:    transform var(--cl-transition), box-shadow var(--cl-transition);
    position:      relative;
}

.cl-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--cl-shadow);
}

.cl-card__poster {
    width:       100%;
    aspect-ratio: 2/3;
    object-fit:  cover;
    display:     block;
}

.cl-card__body {
    padding: 0.75rem;
}

.cl-card__title {
    font-weight:   700;
    font-size:     0.95rem;
    margin-bottom: 0.25rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.cl-card__meta {
    font-size:  0.78rem;
    color:      var(--cl-text-muted);
    display:    flex;
    gap:        0.5rem;
    align-items: center;
}

.cl-card__rank {
    position:      absolute;
    top:           0.5rem;
    left:          0.5rem;
    background:    var(--cl-primary);
    color:         #fff;
    font-weight:   800;
    font-size:     0.9rem;
    width:         2rem;
    height:        2rem;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* ─── Grilles ───────────────────────────────────────────────────────────── */
.cl-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
    gap:                   1.25rem;
}

@media ( min-width: 640px ) {
    .cl-grid { grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) ); }
}

/* ─── Top Charts ────────────────────────────────────────────────────────── */
.cl-top-list { list-style: none; padding: 0; margin: 0; }

.cl-top-item {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        0.75rem 0;
    border-bottom:  1px solid var(--cl-border);
}

.cl-top-item:last-child { border-bottom: none; }

.cl-top-item__rank {
    font-size:   1.4rem;
    font-weight: 800;
    color:       var(--cl-primary);
    min-width:   2rem;
    text-align:  center;
}

.cl-top-item__thumb {
    width:         60px;
    height:        85px;
    object-fit:    cover;
    border-radius: var(--cl-radius);
    flex-shrink:   0;
}

.cl-top-item__info { flex: 1; }
.cl-top-item__title { font-weight: 700; display: block; margin-bottom: 0.2rem; }
.cl-top-item__sub   { font-size: 0.8rem; color: var(--cl-text-muted); }

/* ─── Fil d'activité ────────────────────────────────────────────────────── */
.cl-feed-item {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--cl-border);
}

.cl-feed-item:last-child { border-bottom: none; }

.cl-feed-item__avatar {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

.cl-feed-item__body {
    flex:      1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cl-feed-item__time {
    display:    block;
    font-size:  0.75rem;
    color:      var(--cl-text-muted);
    margin-top: 0.2rem;
}

.cl-feed-item__thumb {
    width:         50px;
    height:        70px;
    object-fit:    cover;
    border-radius: var(--cl-radius);
}

/* ─── Profil utilisateur ────────────────────────────────────────────────── */
.cl-profile {
    display:    grid;
    gap:        1.5rem;
}

.cl-profile__header {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
}

.cl-profile__avatar {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--cl-primary);
}

.cl-profile__name    { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.2rem; }
.cl-profile__level   { font-size: 0.85rem; background: var(--cl-primary); color: #fff; padding: 0.2rem 0.6rem; border-radius: 50px; display: inline-block; }

.cl-stats-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    text-align:            center;
}

.cl-stat__value { font-size: 2rem; font-weight: 800; color: var(--cl-primary); display: block; }
.cl-stat__label { font-size: 0.8rem; color: var(--cl-text-muted); }

/* Barre de progression vers le prochain niveau */
.cl-progress-bar {
    height:        6px;
    background:    var(--cl-border);
    border-radius: 3px;
    overflow:      hidden;
    margin:        0.3rem 0;
}

.cl-progress-bar__fill {
    height:        100%;
    background:    var(--cl-primary);
    border-radius: 3px;
    transition:    width 0.5s ease;
}

/* ─── Formulaire wiki ───────────────────────────────────────────────────── */
.cl-wiki-edit-form {
    display:   flex;
    gap:       0.5rem;
    margin-top: 0.4rem;
}

.cl-wiki-edit-form input,
.cl-wiki-edit-form textarea {
    flex:          1;
    padding:       0.4rem 0.7rem;
    border:        1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background:    var(--cl-bg-card);
    color:         var(--cl-text);
}

.cl-wiki-edit-form button {
    padding:       0.4rem 0.9rem;
    background:    var(--cl-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--cl-radius);
    cursor:        pointer;
    font-weight:   600;
    white-space:   nowrap;
    transition:    background var(--cl-transition);
}

.cl-wiki-edit-form button:hover { background: var(--cl-primary-dark); }

/* ─── Notifications Toast ───────────────────────────────────────────────── */
.cl-toast {
    position:      fixed;
    bottom:        1.5rem;
    right:         1.5rem;
    z-index:       9999;
    padding:       0.8rem 1.4rem;
    border-radius: var(--cl-radius-lg);
    color:         #fff;
    font-size:     0.95rem;
    font-weight:   500;
    box-shadow:    var(--cl-shadow);
    opacity:       0;
    transform:     translateY(10px);
    transition:    opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.cl-toast--visible {
    opacity:   1;
    transform: translateY(0);
}

.cl-toast--success { background: #28a745; }
.cl-toast--error   { background: #dc3545; }
.cl-toast--info    { background: #17a2b8; }

/* ─── Bouton Follow ──────────────────────────────────────────────────────── */
.cl-follow-btn {
    padding:       0.45rem 1.1rem;
    border:        2px solid var(--cl-primary);
    border-radius: 50px;
    background:    transparent;
    color:         var(--cl-primary);
    font-weight:   700;
    cursor:        pointer;
    transition:    all var(--cl-transition);
}

.cl-follow-btn--following {
    background:  var(--cl-primary);
    color:       #fff;
}

/* ─── Divers ────────────────────────────────────────────────────────────── */
.cl-notice, .cl-empty {
    color:     var(--cl-text-muted);
    font-style: italic;
    padding:   1rem;
    text-align: center;
}

.cl-section-title {
    font-size:     1.3rem;
    font-weight:   800;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cl-primary);
    display:       inline-block;
}