/* public/css/gzikyt.css */

:root { --footer-h: 60px; }

body {
    padding-top: 5rem; /* évite que le header fixe masque le contenu */
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

/* Header fixe en haut */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; /* au-dessus du contenu */
    background: #000; /* ou la couleur que tu souhaites */
}

.seekbar-wrap {
    width: 100vw; /* plein écran */
    padding: 4px env(safe-area-inset-right) 2px env(safe-area-inset-left);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    align-items: center;
    gap: 8px;
}
.seekbar {
    width: 100%; /* prend l'espace restant entre les temps */
    height: 32px; /* grande zone cliquable en voiture */
    background: transparent;
}
.timeLabel {
    color: #fff;
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Styles larges pour le slider (WebKit) */
.seekbar::-webkit-slider-runnable-track {
    height: 12px;
    background: #333;
    border-radius: 6px;
}
.seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -4px; /* centre le thumb sur la piste */
    background: #0d6efd; /* bleu bootstrap */
    border-radius: 50%;
    border: 0;
}
/* Firefox */
.seekbar::-moz-range-track {
    height: 12px;
    background: #333;
    border-radius: 6px;
}
.seekbar::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #0d6efd;
    border: 0;
    border-radius: 50%;
}

/* Footer fixe en bas */
.footer {
    position: fixed;
    left: 0; right: 0;
    bottom: 0; /* pin to visual bottom */
    width: 100%;
    min-height: 56px; /* hauteur par défaut compacte */
    z-index: 1000;
    background: #000;
    color: #fff; /* pour mieux voir le texte */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    box-sizing: border-box;
}

/* Marge pour éviter le chevauchement entre header/footer et contenu */
.container {
    margin-top: 6rem;
    margin-bottom: 1rem;
}

/* Exemple d’un style pour les cartes Bootstrap */
.card {
    margin-bottom: 1rem;
}

/* Album grid cards */
.album-card .album-cover { background: #111; border-top-left-radius: .5rem; border-top-right-radius: .5rem; overflow: hidden; }
.album-card .album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.album-card .album-cover--placeholder { display: flex; align-items: center; justify-content: center; color: #666; }
.album-card .placeholder-icon { font-size: 2rem; }
.album-card .card-title { margin-bottom: .25rem; }
.album-card .btn-group .btn { padding: .25rem .4rem; }
.album-card:hover .album-cover img { transform: scale(1.05); }
.album-card.playing { border: 2px solid #0d6efd; }
.editor-toolbar .form-control, .editor-toolbar .form-select { height: 38px; }
.album-grid { margin-bottom: 80px; }
.player-album-grid { margin-bottom: 80px; }

/* Player-specific album grid */
.player-album-grid .album-card {
    cursor: pointer;
    transition: all 0.2s ease;
}
.player-album-grid .album-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.2);
    transform: translateY(-2px);
}
.player-album-grid .player-tracks-list {
    list-style: none;
    max-height: 150px;
    overflow-y: auto;
}
.player-album-grid .player-tracks-list li {
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease;
}
.player-album-grid .player-tracks-list li:hover {
    color: #0d6efd;
}
.player-album-grid .player-tracks-list li.playMe {
    cursor: pointer;
}

/* Cover picker modal grid */
.cover-results .card { cursor: pointer; }
.cover-results img { object-fit: cover; width: 100%; height: 100%; }
.cover-picker-status { font-size: .9rem; }
.cover-artist-hints .btn { white-space: nowrap; }
.cover-title-hints .btn { white-space: nowrap; }
.detected-artist { color: #6c757d; }

/* Richer caption for cover cards */
.cover-cap-provider { opacity: .85; }
.cover-cap-label {
  font-size: .9rem;
  line-height: 1.2em;
  max-height: calc(1.2em * 3); /* up to 3 lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Ajuste l’affichage du player */
.player {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.player audio.zePlayer { display: none; }
.player .playingPic {
    width: 48px;
    height: 48px;
    background-color: #444;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    margin-right: 1rem;
    cursor: pointer;
}
.player .controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.player .controls-wrap {
    display: flex;
    flex-direction: column;
}
.albumNameLabel {
    color: #fff;
    font-weight: 600;
    margin-left: 0.25rem;
    margin-bottom: 0.25rem;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trackNameLabel {
    margin-left: 1rem;
    color: #fff; /* si ton header est noir */
}

/* Icônes dans les listes, etc. */
.folderControls {
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin: 0 0.25rem;
}

/* Images de cover */
.editorAccordBtnCover,
.accordBtnCover {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 0.5rem;
    border-radius: 3px;
}

/* Pour masquer facilement un élément */
.hidden {
    display: none !important;
}

/* Ajuste les modals (Bootstrap 5).
   Ici seulement en exemple : on peut faire plus fin selon tes besoins */
.modal-body {
    position: relative;
}
.modal-body .spinner-border {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.tackControls {
    width: 32px;      /* ou la taille souhaitée */
    height: 32px;
    object-fit: contain; /* ou cover selon le rendu voulu */
    /* éventuellement cursor: pointer; si c’est un bouton cliquable */
}

.modal-dialog {
    margin-top: 6rem; /* adapte la valeur à la hauteur de ton header */
}

/* Augmente le z-index des modals pour qu'ils soient au-dessus du footer */
/* Forcer les modals au-dessus du header fixed (z-index: 9999) */
.modal {
    z-index: 10050; /* au-dessus du header et de tout le player */
}

/* Assure que le backdrop couvre tout, au-dessus du header/footer */
.modal-backdrop {
    z-index: 10040; /* juste en dessous du modal */
}

/* Fullscreen artwork overlay */
.artwork-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11000; /* au-dessus des modals et du header */
}
.artwork-overlay.visible { display: flex; }
.artwork-overlay img {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    display: block;
}
@media (orientation: portrait) {
  .artwork-overlay img { width: 100vw; height: auto; }
}
@media (orientation: landscape) {
  .artwork-overlay img { height: 100vh; width: auto; }
}
.hidden {
    display: none !important;
}

.resultInfoNotif {
    display: block !important; /* Assure que le conteneur est visible */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.accordBtnCover {
    max-height: 50px;
    margin-right: 10px;
    vertical-align: middle;
}

.folderControls {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    cursor: pointer;
}

.folderControls:hover {
    opacity: 0.8;
}

/* Responsive: mobile */
@media (max-width: 576px) {
  .player { flex-direction: column; align-items: stretch; }
  .player .playingPic { margin: 6px auto; }
  .player .controls-wrap { width: 100%; }
  .albumNameLabel { margin-left: 0; max-width: 100vw; }
}

/* Album Details Fullscreen View */
.album-details-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    z-index: 1500;
    overflow-y: auto;
    padding-top: 5rem;
    padding-bottom: var(--footer-h);
}
.album-details-view.d-none {
    display: none !important;
}
.album-details-header {
    position: sticky;
    top: 5rem;
    background: rgba(0, 0, 0, 0.9);
    padding: 1rem;
    z-index: 1501;
    border-bottom: 1px solid #333;
}
.album-details-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    padding: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}
.album-details-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: sticky;
    top: 10rem;
    height: fit-content;
}
.album-details-artwork {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(13, 110, 253, 0.2);
}
.album-details-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.album-details-info {
    text-align: center;
    color: #fff;
    width: 100%;
}
.album-details-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}
.album-details-artist {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 1rem;
}
.album-details-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.stat-item {
    color: #0d6efd;
    font-weight: 600;
}
.album-details-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.album-details-actions .btn {
    width: 100%;
}
.album-details-tracks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.album-details-tracks h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}
.album-tracks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.album-track-item {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}
.album-track-item:hover {
    background: rgba(13, 110, 253, 0.1);
    transform: translateX(4px);
}
.album-track-number {
    text-align: center;
    font-weight: 600;
    color: #0d6efd;
    font-size: 0.9rem;
}
.album-track-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-track-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.album-track-item:hover .album-track-actions {
    opacity: 1;
}
.album-track-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
    .album-details-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    .album-details-sidebar {
        position: static;
    }
    .album-details-name {
        font-size: 1.5rem;
    }
    .album-track-item {
        grid-template-columns: 50px 1fr 80px;
    }
}

/* Mode portrait mobile: filtre au-dessus, boutons en bas (footer auto-hauteur) */
@media (orientation: portrait) {
   .footer {
     height: auto; /* s'adapte au contenu */
     padding: 8px 12px 8px; /* base */
     padding-bottom: max(8px, env(safe-area-inset-bottom)); /* relever le contenu au-dessus du home bar */
     align-items: center;
     justify-content: center;
     gap: 8px;
     flex-wrap: wrap; /* permet de placer le filtre au-dessus */
   }

   /* Filtre plein largeur sur la première ligne */
   .footer .filterInput {
     position: static;
     order: -1; /* passe en première ligne */
     flex: 1 0 100%;
     height: 36px;
     padding: 6px 10px;
     border-radius: 6px;
     border: 1px solid #333;
     background: #111;
     color: #fff;
     margin: 0; /* évite les surprises */
   }

   /* Boutons sur la ligne du bas, sans marge supplémentaire */
   .footer .btn { margin-bottom: 0; flex: 0 0 auto; }
   .footer-brand { display: none; }
   .footer .btn-group { flex: 0 0 auto; }
   .footer .affScore { font-size: .75rem; vertical-align: middle; }

   /* Le padding-bottom du body gère l'espace requis */
   .container { margin-bottom: 1rem; }
}