/* =====================================================================
   NIMBUSTOR TV — STYLES
   Chargé par index.html. Modifier ce fichier, pas une copie ailleurs.
   ===================================================================== */
        :root {
            --netflix-red: #E50914;
            --netflix-black: #141414;
            --card-gray: #1f1f1f;
            --text-white: #FFFFFF;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: var(--netflix-black);
            color: var(--text-white);
            margin: 0;
            overflow-x: hidden;
        }

        header {
            background: #141414;
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-sizing: border-box;
        }

        header h1 { color: var(--netflix-red); margin: 0; cursor: pointer; letter-spacing: 2px; font-size: 1.8rem; }

        .nav-links button {
            background: rgba(255,255,255,0.1); border: none; color: white; margin-left: 10px;
            padding: 8px 15px; cursor: pointer; font-size: 0.9rem; border-radius: 4px; transition: 0.3s;
        }
        .nav-links button:hover { background: var(--netflix-red); }

        main { padding-top: 155px; min-height: calc(100vh - 155px); position: relative; }
        .container { padding: 0 50px; padding-bottom: 50px; }

        /* --- SOUS-HEADER FIXE (breadcrumb + titre) --- */
        #stickySubHeader {
            position: fixed;
            top: 72px; /* juste sous le header principal */
            left: 0;
            width: 100%;
            z-index: 999;
            background: #141414;
            border-bottom: 1px solid #2a2a2a;
            padding: 8px 50px 10px 50px;
            box-sizing: border-box;
        }
        #viewTitle { margin: 4px 0 0 0; font-size: 1.4rem; display: flex; align-items: center; gap: 10px; }
        .badge-timeline { font-size: 0.65rem; font-weight: bold; letter-spacing: 0.5px; color: #888; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 12px; padding: 3px 10px; vertical-align: middle; white-space: nowrap; }

        /* --- BREADCRUMB --- */
        .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
        .breadcrumb-item { color: #aaa; font-size: 0.85rem; cursor: pointer; transition: color 0.2s; }
        .breadcrumb-item:hover { color: white; }
        .breadcrumb-item.active { color: white; font-weight: bold; cursor: default; }
        .breadcrumb-sep { color: #555; font-size: 0.85rem; }

        /* --- HUB D'ACCUEIL --- */
        .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }

        .hub-card {
            height: 200px; border-radius: 8px; background-size: cover; background-position: center;
            cursor: pointer; transition: transform 0.4s, box-shadow 0.4s; border: 2px solid #333;
            position: relative; overflow: hidden; display: flex; align-items: flex-end;
        }
        .hub-card:hover { transform: scale(1.03); border-color: white; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
        .hub-card span {
            width: 100%; background: rgba(0,0,0,0.82); color: white; padding: 10px;
            text-align: center; font-weight: bold; font-size: 0.85rem;
            opacity: 0; transform: translateY(4px);
            transition: opacity 0.25s, transform 0.25s;
        }
        .hub-card:hover span { opacity: 1; transform: translateY(0); }
        .hub-card.no-img span { opacity: 1; transform: translateY(0); }
        .hub-card.folder-card { background-color: #222; justify-content: center; align-items: flex-end; }

        /* --- TUILES SAISON (format portrait jaquette) --- */
        .season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 40px; }
        .season-card { background: var(--card-gray); border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid #333; transition: transform 0.3s, border-color 0.3s; position: relative; }
        .season-card:hover { transform: scale(1.04); border-color: white; }
        .season-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
        .season-card-label { padding: 10px; text-align: center; }
        .season-card-label .s-number { font-size: 0.75rem; font-weight: bold; color: #8888ff; text-transform: uppercase; letter-spacing: 1px; white-space: normal; word-break: break-word; line-height: 1.3; }
        .season-card-label .s-count { font-size: 0.68rem; color: #666; margin-top: 3px; }
        .season-card.no-img img { display: none; }
        .season-card.no-img { display: flex; flex-direction: column; justify-content: center; min-height: 220px; background: #1e1e2e; border-color: #3a3a6a; }
        .season-card.no-img .season-card-label .s-number { font-size: 1rem; color: #8888ff; }

        /* --- FORMULAIRE --- */
        .modal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); overflow-y: auto; }
        .modal-content { background: #181818; margin: 2% auto; padding: 30px; width: 55%; border-radius: 8px; border: 1px solid #333; }
        .form-group { margin-bottom: 12px; }
        .form-row { display: flex; gap: 10px; }
        label { font-size: 0.75rem; color: #aaa; display: block; margin-bottom: 4px; }
        input, select { width: 100%; padding: 10px; background: #333; border: 1px solid #444; color: white; border-radius: 4px; box-sizing: border-box; }
        input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--netflix-red); }
        .pdf-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .pdf-cat-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 10px; border-radius: 6px; background: #222; transition: background 0.15s; font-size: 0.85rem; }
        .pdf-cat-item:hover { background: #2c2c2c; }
        .pdf-cat-item input[type="checkbox"] { flex-shrink: 0; }
        .pdf-select-all-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 10px 12px; border-radius: 6px; background: #262626; font-weight: bold; }
        .pdf-select-all-row:hover { background: #2d2d2d; }
        .pdf-option-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 6px; background: #222; font-size: 0.82rem; color: #ddd; }
        .dynamic-field { display: none; background: #252525; padding: 12px; border-radius: 4px; margin-top: 5px; border-left: 3px solid var(--netflix-red); }
        .type-selector { display: flex; gap: 20px; margin: 10px 0; background: #333; padding: 10px; border-radius: 4px; align-items: center; }
        .type-selector label { display: flex; align-items: center; gap: 8px; color: white; cursor: pointer; margin: 0; font-size: 0.8rem; }
        .type-selector input { width: auto; }
        .btn-save { background: var(--netflix-red); color: white; border: none; padding: 12px; cursor: pointer; width: 100%; font-weight: bold; margin-top: 15px; border-radius: 4px; }
        .btn-shortcut { background: #444; color: white; border: none; padding: 8px; cursor: pointer; border-radius: 4px; flex: 1; margin-top: 10px; font-size: 0.8rem; transition: 0.3s; }

        /* --- GENRES --- */
        .genres-area { background: #252525; padding: 12px; border-radius: 4px; border-left: 3px solid var(--netflix-red); margin-bottom: 12px; }
        .genres-area > label { font-size: 0.75rem; color: #aaa; display: block; margin-bottom: 8px; }
        .genres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
        .genre-item { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 8px; border-radius: 4px; transition: background 0.2s; }
        .genre-item:hover { background: #333; }
        .genre-item input[type="checkbox"] { width: auto; accent-color: var(--netflix-red); cursor: pointer; margin: 0; }
        .genre-item span { font-size: 0.78rem; color: #ccc; }
        .genre-item.checked span { color: white; font-weight: bold; }
        .genres-inherited { background: #1a1a2e; padding: 10px 12px; border-radius: 4px; border-left: 3px solid #5555ff; margin-bottom: 12px; font-size: 0.78rem; color: #aaaaff; }
        .genres-inherited strong { color: #8888ff; }

        /* --- JUKEBOX --- */
        .jukebox { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
        .season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
        .movie-card { background: var(--card-gray); border-radius: 4px; overflow: hidden; transition: 0.3s; border: 1px solid #333; position: relative; }
        .movie-card:hover { transform: translateY(-4px); border-color: #666; }
        .movie-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
        .movie-card-body { padding: 12px; }
        .season-card { background: var(--card-gray); border-radius: 4px; overflow: hidden; transition: 0.3s; border: 1px solid #333; position: relative; cursor: pointer; }
        .season-card:hover { transform: translateY(-4px); border-color: #5555ff; box-shadow: 0 4px 16px rgba(85,85,255,0.2); }
        .season-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
        .season-card.no-img { border: 2px dashed #444; }
        .season-card.no-img::before { content: '📺'; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 2/3; background: #1a1a2e; }
        .season-card-label { padding: 10px 12px; background: var(--card-gray); }
        .season-card-label .s-number { font-size: 0.88rem; font-weight: bold; color: #8888ff; }
        .season-card-label .s-count { font-size: 0.72rem; color: #666; margin-top: 3px; }
        .tag-series { position: absolute; top: 10px; right: 10px; background: var(--netflix-red); color: white; padding: 4px 8px; font-size: 0.7rem; border-radius: 4px; font-weight: bold; }

        /* --- TIMELINE COLLECTION --- */
        .col-view-toggle { display:flex; gap:8px; margin-bottom:20px; }
        .col-view-btn { background:#2a2a2a; border:1px solid #444; color:#888; padding:7px 16px; border-radius:4px; cursor:pointer; font-size:0.8rem; transition:0.2s; }
        .col-view-btn.active { background:var(--netflix-red); border-color:var(--netflix-red); color:white; }
        .timeline-section { display:none; margin-top:10px; }
        .timeline-row { display:grid; grid-template-columns: repeat(8, 1fr); gap:20px; padding-bottom:16px; align-items:start; }
        .timeline-item { display:flex; flex-direction:column; align-items:stretch; position:relative; }
        .timeline-card { width:100%; border-radius:6px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:0.2s; position:relative; z-index:1; display:flex; flex-direction:column; }
        .timeline-card:hover { border-color:white; transform:translateY(-4px); }
        .timeline-card.film { border-color:#e87c23; }
        .timeline-card.serie { border-color:#5555ff; }
        .timeline-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; flex-shrink:0; }
        .timeline-card-label { background:#1a1a1a; padding:8px 10px; font-size:0.72rem; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:flex-start; min-height:56px; }
        .timeline-card-label .tl-type { font-size:0.65rem; font-weight:bold; text-transform:uppercase; margin-bottom:3px; flex-shrink:0; }
        .timeline-card-label .tl-type.film { color:#e87c23; }
        .timeline-card-label .tl-type.serie { color:#8888ff; }
        .timeline-card-label .tl-title { color:#ccc; white-space:normal; overflow:visible; word-break:break-word; line-height:1.3; }
        .timeline-card-label .tl-sub { color:#666; font-size:0.63rem; margin-top:3px; flex-shrink:0; }
        .manage-modal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); overflow-y: auto; }
        .manage-content { background: #181818; margin: 2% auto; padding: 30px; width: 80%; max-width: 1000px; border-radius: 8px; border: 1px solid #333; }
        .manage-tabs { display: flex; gap: 5px; margin-bottom: 25px; border-bottom: 1px solid #333; flex-wrap: wrap; }
        .manage-tab { background: none; border: none; color: #888; padding: 10px 20px; cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: 0.2s; }
        .manage-tab.active { color: white; border-bottom-color: var(--netflix-red); }
        .manage-tab:hover { color: white; }
        .manage-table { width: 100%; border-collapse: collapse; }
        .manage-table th { text-align: left; color: #888; font-size: 0.75rem; padding: 8px 12px; border-bottom: 1px solid #333; }
        .manage-table td { padding: 10px 12px; border-bottom: 1px solid #222; vertical-align: middle; font-size: 0.85rem; }
        .manage-table tr:hover td { background: #222; }
        .manage-img-preview { width: 40px; height: 60px; object-fit: cover; border-radius: 3px; border: 1px solid #444; }
        .manage-input { background: #2a2a2a; border: 1px solid #444; color: white; padding: 6px 10px; border-radius: 4px; font-size: 0.8rem; width: 220px; }
        .manage-btn { background: var(--netflix-red); border: none; color: white; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.78rem; }
        .manage-btn-danger { background: #2a2a2a; color: #777; border: 1px solid #444; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.78rem; transition: 0.2s; }
        .manage-btn-danger:hover { background: #c0392b; border-color: #c0392b; color: white; }
        .tag-folder { display: inline-block; background: #333; color: #aaa; font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
        .tag-serie-parent { display: inline-block; background: #1a3a5c; color: #5aa0e0; font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
        .tag-season { display: inline-block; background: #1a3a2a; color: #5ae090; font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
        /* --- TREE ROWS --- */
        .tree-parent td:first-child { cursor: pointer; user-select: none; }
        .tree-parent td:first-child:hover { color: white; }
        .tree-toggle { display: inline-block; width: 18px; color: #888; font-size: 0.7rem; transition: transform 0.2s; }
        .tree-toggle.open { transform: rotate(90deg); color: white; }
        .tree-child { display: none; }
        .tree-child.visible { display: table-row; }
        .tree-child td:first-child { padding-left: 36px; color: #aaa; }
        .tree-group-header td { background: #1a1a1a; color: #888; font-size: 0.75rem; padding: 6px 12px; border-bottom: 1px solid #2a2a2a; cursor: pointer; }
        .tree-group-header td:hover { background: #222; }
        .tree-series-row td { background: #141414; }
        .tree-season-row td { padding-left: 48px; color: #aaa; font-size: 0.82rem; }
        /* --- TOAST --- */
        #toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1e1e1e; border: 1px solid #444; color: #eee; padding: 10px 22px; border-radius: 6px; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 9999; }
        #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    

/* --- BACKUP REMINDER --- */
#backupReminder {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: -100px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #1e1e1e;
    border: 1px solid #E5A00D;
    border-radius: 8px;
    color: #eee;
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
    transition: bottom .35s ease;
}
#backupReminder.visible { bottom: 20px; }
#backupReminder.urgent { border-color: #e55b0d; box-shadow: 0 6px 28px rgba(229,91,13,.35); }
#backupReminder .br-icon { font-size: 1.5rem; flex: 0 0 auto; }
#backupReminder .br-copy { flex: 1; min-width: 0; }
#backupReminder #brText { color: #fff; font-weight: 700; font-size: .9rem; }
#backupReminder #brSub { color: #aaa; font-size: .78rem; margin-top: 3px; }
#backupReminder .br-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#backupReminder button { font: inherit; cursor: pointer; }
#backupReminder .br-btn { background: #E5A00D; border: 1px solid #E5A00D; color: #141414; padding: 8px 13px; border-radius: 4px; font-weight: 700; }
#backupReminder .br-later { background: transparent; border: 1px solid #555; color: #ccc; padding: 8px 11px; border-radius: 4px; }
#backupReminder .br-close { background: transparent; border: 0; color: #888; font-size: 1.3rem; padding: 4px 6px; }
#backupReminder .br-btn:hover { background: #f2b51c; }
#backupReminder .br-later:hover, #backupReminder .br-close:hover { color: #fff; }
@media (max-width: 700px) {
    #backupReminder { left: 10px; right: 10px; gap: 9px; padding: 12px; flex-wrap: wrap; }
    #backupReminder.visible { bottom: 10px; }
    #backupReminder .br-copy { flex-basis: calc(100% - 42px); }
    #backupReminder .br-actions { width: 100%; justify-content: flex-end; }
}
/* --- SUPPRESSION ANNULABLE --- */
#undoDeleteBanner {
    position: fixed; left: 20px; right: 20px; bottom: -110px; z-index: 10001;
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #1e1e1e; border: 1px solid var(--netflix-red); border-radius: 8px;
    color: #eee; box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: bottom .35s ease;
}
#undoDeleteBanner.visible { bottom: 20px; }
#undoDeleteText { flex: 1; min-width: 0; font-size: .85rem; }
#undoDeleteBanner button { background: transparent; border: 1px solid #777; color: #fff; padding: 7px 12px; border-radius: 4px; cursor: pointer; font: inherit; }
#undoDeleteBanner button:hover { background: var(--netflix-red); border-color: var(--netflix-red); }
#undoDeleteCountdown { color: #aaa; font-size: .75rem; white-space: nowrap; }
#undoDeleteProgress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--netflix-red); transition: width .1s linear; }
@media (max-width: 700px) { #undoDeleteBanner { left: 10px; right: 10px; flex-wrap: wrap; } #undoDeleteBanner.visible { bottom: 10px; } }
/* Keep the temporary undo action clear of the persistent backup reminder. */
body:has(#backupReminder.visible) #undoDeleteBanner.visible { bottom: 105px; }
@media (max-width: 700px) { body:has(#backupReminder.visible) #undoDeleteBanner.visible { bottom: 95px; } }

/* --- MODE LECTURE SEULE (sans mot de passe administrateur) --- */
body.lecture-seule .admin-only { display: none !important; }
body.lecture-seule #backupReminder { display: none !important; }
body.lecture-seule #librarySection .movie-card[onclick^="editMovie"],
body.lecture-seule .timeline-card[onclick^="editMovie"] { cursor: default !important; }
#adminButton { background: rgba(255,255,255,0.1); }
body:not(.lecture-seule) #adminButton { background: #2e7d32; }

/* --- RECHERCHE GLOBALE --- */
.search-box { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); width: min(340px, 40vw); }
.search-box input { width: 100%; padding: 8px 14px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 20px; color: #fff; font-size: 0.88rem; }
.search-box input:focus { outline: none; border-color: var(--netflix-red); background: #1f1f1f; }
.search-box input::placeholder { color: #777; }

/* --- EN-TÊTE SUR ÉCRANS MOYENS : tous les boutons sur une ligne --- */
header h1 { white-space: nowrap; }
@media (max-width: 1400px) {
    header { padding: 20px 30px; }
    header h1 { font-size: 1.5rem; }
    .nav-links button { margin-left: 6px; padding: 8px 10px; font-size: 0.82rem; }
    #stickySubHeader { padding-left: 30px; padding-right: 30px; }
    .search-box { right: 30px; }
}

/* --- PLEX : masqué quand le site est en https (Plex n'est joignable qu'en local) --- */
body.plex-indisponible .plex-only { display: none !important; }