* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #070b10;
  color: #d8dee9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.app {
  height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 230px 1fr 300px;
  overflow: hidden;
}

.left, .right {
  background: #0d1219;
  border-color: #202733;
  overflow: auto;
}

.left {
  border-right: 1px solid #202733;
  padding: 12px;
}

.right {
  border-left: 1px solid #202733;
  padding: 12px;
}

.brand {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 18px;
}

.section-title {
  color: #8b9bb0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
  margin: 10px 0 8px;
}

.list .item {
  padding: 7px 9px;
  border-radius: 5px;
  cursor: pointer;
  color: #d8dee9;
}

.list .item:hover {
  background: #1b2430;
}

.list .item.active {
  background: #b91c1c;
  color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #090d13;
}

.toolbar {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #202733;
  background: #0d1219;
}

#search {
  flex: 1;
  background: #05070a;
  color: #fff;
  border: 1px solid #2a3443;
  border-radius: 5px;
  padding: 9px;
}

button {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 5px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover {
  background: #374151;
}

.table-wrap {
  overflow: auto;
  flex: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
  background: #111827;
  z-index: 2;
}

th, td {
  padding: 7px 8px;
  border-bottom: 1px solid #171d27;
  white-space: nowrap;
  text-align: left;
}

th {
  color: #9ca3af;
  font-weight: normal;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: #1b2430;
}

tbody tr.selected {
  background: #b91c1c !important;
  color: #fff;
}

.album-row td {
  background: #0f1722;
  color: #f87171;
  font-weight: bold;
  border-top: 1px solid #2a3443;
}

.panel {
  background: #111827;
  border: 1px solid #202733;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.current {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.small {
  color: #aeb8c5;
  line-height: 1.5;
  word-break: break-word;
}

.player {
  height: 64px;
  background: #05070a;
  border-top: 1px solid #202733;
  display: flex;
  align-items: center;
  padding: 10px;
}

.player audio {
  width: 100%;
}

.empty {
  color: #9ca3af;
  padding: 18px;
}



.qitem {
  border-bottom:1px solid #202733;
  padding:7px 0;
}

.qitem button {
  padding:2px 6px;
  margin-top:4px;
  font-size:11px;
}























.album-row {
  cursor: pointer;
}

.album-row td {
  color: #ff6b6b;
  font-weight: bold;
  background: #101820;
}

.album-count {
  color: #9ca3af;
  font-weight: normal;
}

.track.selected {
  background: #b91c1c !important;
  color: #fff;
}













.album-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.album-head button {
  padding:2px 8px;
  font-size:11px;
  margin-left:4px;
}


#btnOnAir {
  background: #374151;
  color: #fff;
}

#btnOnAir.on {
  background: #dc2626;
  color: #fff;
  font-weight: bold;
}

.gdloq-header {
  text-align: center;
  margin-top: 20px;
}

.gdloq-logo {
  width: min(260px, 70vw);
  opacity: 0.95;
}


.gdloq-top {
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 10;
}

.gdloq-logo-mini {
  width: 90px;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}


.onair-btn {
  position: relative;
  padding: 10px 18px;
  border-radius: 50px;
  background: #111;
  border: 1px solid #444;
  color: #fff;
  cursor: pointer;
}

.onair-btn.active {
  border-color: #ff2b2b;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
  color: #ff2b2b;
}

/* effet respiration ON AIR */
.onair-btn.active::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50px;
  border: 2px solid rgba(255,0,0,0.4);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}


.gdloq-logo-mini {
  width: 90px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  opacity: 0.9;
}



/* masque uniquement le texte branding */
.brand {
  display: none;
}


.gdloq-top {
  position: static;
  text-align: center;
  margin-bottom: 15px;
}


/* logo propre dans la colonne gauche */
.gdloq-sidebar-logo {
  text-align: center;
  margin: 4px 0 12px;
}

.gdloq-sidebar-logo img {
  width: 95px;
  height: auto;
  display: inline-block;
  opacity: .95;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.18));
}

/* cache seulement le texte GdLoQ Radio */
.brand {
  display: none !important;
}


/* correction logo : image noire -> blanche sur thème sombre */
.gdloq-sidebar-logo img {
  width: 95px !important;
  height: auto !important;
  display: inline-block !important;
  opacity: 1 !important;
  filter: invert(1) brightness(1.8) drop-shadow(0 0 5px rgba(255,255,255,.25)) !important;
}


#cover {
  transition: opacity .18s ease;
  min-height: 210px;
  object-fit: cover;
  background: #05070a;
}


/* FILE RADIO-DJ-LIKE : affichage propre */

















/* FIX FILE RADIO */











/* FIX PANEL QUI CASSE LA FILE */
.panel {
  display: block !important;
}

/* FIX FILE */


/* FORCER GRID PROPRE */


/* NUMERO */


/* TEXTE */






/* BOUTON */



/* FORCE FILE RADIO - PRIORITÉ MAX */








/* FILE RADIO - VERSION PROPRE UNIQUE */
#queueBox {
  display: block !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #05070a !important;
  border: 1px solid #2a3443 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  text-align: left !important;
}

#queueBox > div {
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#queueBox .empty {
  color: #9ca3af !important;
  font-size: 12px !important;
  padding: 14px !important;
  text-align: center !important;
}








/* ===== Responsive mobile propre ===== */

.mobile-radio-box{
  display:none;
}

@media (max-width: 800px){

  body{
    font-size:14px;
    padding-top:0 !important;
    overflow:auto;
  }

  .app{
    height:auto;
    min-height:calc(100vh - 70px);
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  .right{
    order:1;
    border-left:0;
    border-bottom:1px solid #202733;
    padding:10px;
  }

  .right .panel{
    margin-bottom:10px;
  }

  .right .panel:nth-child(2),
  .right .panel:nth-child(4){
    display:none;
  }

  #cover{
    max-height:220px;
    object-fit:contain;
    background:#05070a;
  }

  .mobile-radio-box{
    order:2;
    display:flex !important;
    gap:8px;
    padding:10px;
    background:#0d1219;
    border-bottom:1px solid #202733;
    position:sticky;
    top:0;
    z-index:100;
  }

  .mobile-radio-box select{
    flex:1;
    min-width:0;
    padding:11px;
    background:#05070a;
    color:#fff;
    border:1px solid #2a3443;
    border-radius:8px;
  }

  .mobile-radio-box button{
    background:#b91c1c;
    color:#fff;
    border:0;
    border-radius:8px;
    padding:11px 14px;
    font-weight:700;
  }

  .main{
    order:3;
    overflow:visible;
    min-height:0;
  }

  .toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px;
    position:sticky;
    top:54px;
    z-index:90;
  }

  #search{
    grid-column:1 / -1;
    width:100%;
    font-size:16px;
  }

  .toolbar button{
    width:100%;
    padding:10px 8px;
    font-size:13px;
  }

  .left{
    order:4;
    border-right:0;
    border-top:1px solid #202733;
    border-bottom:1px solid #202733;
    padding:10px;
    overflow:visible;
  }

  .gdloq-sidebar-logo,
  .brand{
    display:none;
  }

  #genres.list{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
  }

  #genres .item{
    white-space:nowrap;
    flex:0 0 auto;
    border:1px solid #202733;
    background:#111827;
    padding:8px 10px;
  }

  #genres .item.active{
    background:#b91c1c;
    border-color:#b91c1c;
  }

  .table-wrap{
    overflow:auto;
    max-height:none;
  }

  table{
    font-size:13px;
  }

  th, td{
    padding:8px 7px;
  }

  th:nth-child(3),
  td:nth-child(3),
  th:nth-child(4),
  td:nth-child(4){
    display:none;
  }

  .player{
    position:sticky;
    bottom:0;
    z-index:200;
    height:70px;
  }

  .player audio{
    width:100%;
  }
}

.clear-search{
  width:42px;
  min-width:42px;
  height:38px;
  padding:0;
  font-size:22px;
  font-weight:700;
  line-height:1;
  background:#111827;
  color:#e5e7eb;
  border:1px solid #4b5563;
  border-radius:6px;
}

.clear-search:hover{
  background:#b91c1c;
  color:#fff;
}

@media (max-width: 800px){
  .clear-search{
    width:48px;
    min-width:48px;
    height:42px;
    grid-column:auto;
  }
}

.mini-btn{
  float:right;
  margin-left:5px;
  padding:2px 7px;
  font-size:11px;
  line-height:1.2;
  border-radius:5px;
}

@media (max-width: 800px){
  .mini-btn{
    float:none;
    margin:3px 3px 0 0;
    padding:5px 8px;
  }
}

/* --- GdLoQ responsive fusion desktop/mobile --- */
@media (max-width: 900px){
  html, body{
    width:100%;
    overflow-x:hidden;
  }

  .app{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:100vh !important;
    padding-bottom:86px !important;
  }

  .left{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    order:1;
    border-right:0 !important;
    border-bottom:1px solid #263241;
    padding:10px !important;
  }

  .gdloq-sidebar-logo img{
    max-height:52px !important;
    width:auto !important;
  }

  .brand{
    text-align:center;
    font-size:18px !important;
    margin:4px 0 8px !important;
  }

  #genres{
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:6px !important;
    max-height:none !important;
  }

  #genres .item{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    border-radius:999px !important;
    padding:9px 13px !important;
    min-width:auto !important;
  }

  .main{
    order:2;
    width:100% !important;
    min-width:0 !important;
    padding:8px !important;
  }

  .toolbar{
    display:grid !important;
    grid-template-columns:44px 1fr 1fr !important;
    gap:7px !important;
    align-items:center !important;
  }

  .toolbar input#search{
    grid-column:2 / 4 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .toolbar button{
    min-height:42px !important;
    padding:8px 9px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .toolbar button.clear-search,
  #clearSearch{
    grid-column:1 / 2 !important;
  }

  .table-wrap{
    width:100% !important;
    overflow-x:auto !important;
    max-height:none !important;
  }

  table{
    min-width:820px !important;
    font-size:12px !important;
  }

  th, td{
    padding:7px 6px !important;
  }

  .album-head{
    gap:8px !important;
  }

  .album-head button{
    padding:5px 8px !important;
    font-size:11px !important;
  }

  .right{
    order:3;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    border-left:0 !important;
    border-top:1px solid #263241;
    padding:8px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .right .panel{
    margin:0 !important;
  }

  #cover{
    max-width:220px !important;
    display:block !important;
    margin:0 auto 12px !important;
  }

  .player{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:9999 !important;
    background:#05070a !important;
    border-top:1px solid #263241 !important;
    padding:6px !important;
  }

  .player audio{
    width:100% !important;
  }

  #rotationBox,
  .gdloq-header{
    display:none !important;
  }

  .mobile-radio-box{
    display:flex !important;
    order:0;
    width:100% !important;
    padding:8px !important;
    gap:8px !important;
  }

  .mobile-radio-box select{
    flex:1 !important;
    min-width:0 !important;
  }

  .mobile-radio-box button{
    flex:0 0 auto !important;
  }
}

@media (max-width: 900px){

  table th:nth-child(3),
  table td:nth-child(3){
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    text-align:center !important;
    color:#facc15 !important;
    font-weight:700 !important;
  }

  table th:nth-child(4),
  table td:nth-child(4){
    min-width:140px !important;
  }

  table th:nth-child(5),
  table td:nth-child(5){
    display:none !important;
  }
}

@media (max-width: 900px){

  table{
    min-width:0 !important;
    width:100% !important;
  }

  thead{
    display:none !important;
  }

  tbody, tr, td{
    display:block !important;
    width:100% !important;
  }

  tr.track{
    position:relative !important;
    margin:8px 0 !important;
    padding:10px 62px 10px 10px !important;
    background:#111827 !important;
    border:1px solid #263241 !important;
    border-radius:12px !important;
  }

  tr.track td{
    border:0 !important;
    padding:2px 0 !important;
  }

  tr.track td:nth-child(1){
    font-weight:800 !important;
    color:#fff !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  tr.track td:nth-child(2){
    color:#e5e7eb !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  tr.track td:nth-child(3){
    position:absolute !important;
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:auto !important;
    min-width:45px !important;
    text-align:right !important;
    color:#facc15 !important;
    font-weight:900 !important;
    font-size:14px !important;
  }

  tr.track td:nth-child(4){
    color:#9ca3af !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  tr.track td:nth-child(5){
    display:none !important;
  }

  tr.album-row{
    display:block !important;
    margin-top:10px !important;
  }

  tr.album-row td{
    display:block !important;
    width:100% !important;
  }

  .album-head{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .album-head > span:last-child{
    display:flex !important;
    gap:8px !important;
  }

  .album-head button{
    flex:1 !important;
  }
}

@media (max-width: 900px){

  body{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .app{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .main{
    padding-left:6px !important;
    padding-right:6px !important;
    overflow:hidden !important;
  }

  .table-wrap{
    overflow:hidden !important;
  }

  tr.track{
    width:calc(100% - 8px) !important;
    margin-left:4px !important;
    margin-right:4px !important;
    padding-right:54px !important;
  }

  tr.track td:nth-child(3){
    right:8px !important;
    min-width:38px !important;
    font-size:13px !important;
  }

  .toolbar{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  .right,
  .left{
    width:calc(100% - 8px) !important;
    margin-left:4px !important;
    margin-right:4px !important;
  }
}

@media (max-width: 900px){

  .toolbar{
    grid-template-columns:46px 1fr 1fr !important;
  }

  .toolbar input#search{
    grid-column:2 / 4 !important;
  }

  tr.track{
    padding:11px 58px 11px 12px !important;
  }

  tr.track td:nth-child(3)::before{
    content:"Durée ";
    display:block;
    color:#9ca3af;
    font-size:10px;
    font-weight:600;
    line-height:1;
  }

  tr.track td:nth-child(3){
    background:#0f172a !important;
    border:1px solid #334155 !important;
    border-radius:10px !important;
    padding:5px 6px !important;
    right:8px !important;
    min-width:46px !important;
    text-align:center !important;
  }
}

.mobile-actions{
  display:none;
}

@media (max-width: 900px){

  tr.track{
    padding-right:86px !important;
  }

  tr.track td.mobile-actions{
    display:flex !important;
    position:absolute !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    gap:5px !important;
    border:0 !important;
    padding:0 !important;
  }

  tr.track td.mobile-actions button{
    min-height:30px !important;
    width:34px !important;
    padding:4px !important;
    font-size:14px !important;
    border-radius:9px !important;
  }

  tr.track td:nth-child(3){
    top:12px !important;
    transform:none !important;
  }
}

/* --- correction propre track desktop/mobile --- */
.mobile-track-actions{
  display:none;
}

@media (min-width: 901px){
  .duration-cell{
    text-align:center;
    color:#e5e7eb;
    font-weight:600;
  }
}

@media (max-width: 900px){

  tr.track{
    padding:12px 68px 12px 12px !important;
    overflow:hidden !important;
  }

  tr.track td:nth-child(1){
    font-weight:900 !important;
    color:#fff !important;
  }

  tr.track td:nth-child(2){
    color:#e5e7eb !important;
  }

  tr.track td.duration-cell,
  tr.track td:nth-child(3){
    position:absolute !important;
    right:10px !important;
    top:12px !important;
    transform:none !important;
    display:block !important;
    width:auto !important;
    min-width:46px !important;
    max-width:56px !important;
    padding:5px 6px !important;
    border:1px solid #334155 !important;
    border-radius:10px !important;
    background:#0f172a !important;
    color:#facc15 !important;
    font-weight:900 !important;
    text-align:center !important;
    font-size:13px !important;
  }

  tr.track td:nth-child(4){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    color:#9ca3af !important;
    font-size:12px !important;
    margin-top:4px !important;
  }

  .album-text{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .mobile-track-actions{
    display:flex !important;
    gap:6px !important;
    flex:0 0 auto !important;
  }

  .mobile-track-actions button{
    width:34px !important;
    min-width:34px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:14px !important;
    font-weight:900 !important;
  }

  tr.track td:nth-child(5){
    display:none !important;
  }
}

.mobile-duration-inline{
  display:none;
}

@media (max-width: 900px){
  .mobile-duration-inline{
    display:inline-block !important;
    margin-left:8px !important;
    color:#facc15 !important;
    font-weight:900 !important;
  }

  tr.track td.duration-cell{
    display:none !important;
  }

  tr.track{
    padding-right:12px !important;
  }
}