/* ============================================================================
   admin.css — PANEL ADMINA: szerokie okno z zakładkami (transmisja, czat,
   użytkownicy, bany, bot). Ten sam język wizualny co reszta strony: czerń,
   cienkie ramki, szary akcent, wersaliki na etykietach.
   Na telefonie panel schodzi do jednej kolumny i pełnego ekranu.
   ========================================================================== */

.admin-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.admin-modal[hidden]{display:none}

.admin-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(980px,100%);max-height:88dvh;
  border-radius:18px;border:1px solid rgba(255,255,255,0.12);background:#0b0d0e;
  box-shadow:0 40px 110px rgba(0,0,0,0.72);overflow:hidden;
  -webkit-user-select:text;user-select:text;
}
.admin-modal.is-busy .admin-panel{opacity:.6;pointer-events:none}

.admin-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px clamp(18px,2.4vw,28px) 14px;
}
.admin-head .admin-title{font:900 20px/1.2 var(--font-family);letter-spacing:.04em;margin:0}

/* ---- ZAKŁADKI ------------------------------------------------------------- */
.admin-tabs{
  display:flex;gap:4px;padding:0 clamp(18px,2.4vw,28px);
  border-bottom:1px solid rgba(255,255,255,0.1);overflow-x:auto;
  scrollbar-width:none;
}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tab{
  flex:none;border:0;background:transparent;cursor:pointer;
  padding:11px 14px;border-bottom:2px solid transparent;
  color:rgba(255,255,255,0.45);
  font:800 11px/1 var(--font-family);letter-spacing:.1em;
  transition:color .18s ease,border-color .18s ease;
}
.admin-tab:hover{color:rgba(255,255,255,0.8)}
.admin-tab.is-active{color:#fff;border-bottom-color:#fff}

/* ---- TREŚĆ ---------------------------------------------------------------- */
.admin-body{flex:1;min-height:0;overflow-y:auto;padding:20px clamp(18px,2.4vw,28px)}
.admin-pane{display:none}
.admin-pane.is-active{display:block}

.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.admin-field-wide{grid-column:1 / -1}
.admin-field .auth-label{margin-top:0}
.admin-textarea{height:auto;padding:10px 12px;line-height:1.4;resize:vertical}

.admin-switches{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px 18px;margin:18px 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.08);
}
/* Przełącznik w siatce ustawień nie potrzebuje górnego marginesu — inaczej
   napis wchodził na pole pod spodem. */
.admin-switches .toggle{margin-top:0}
.admin-pane .admin-switches:first-child{margin-top:0;padding-top:0;border-top:0}
.admin-field .auth-hint{margin-top:8px}
.admin-danger{margin-top:22px}

.admin-toolbar{display:flex;gap:10px;align-items:center;margin:18px 0 14px}
/* Zielony przycisk „dodaj" — jedyny akcent koloru w panelu, bo to akcja
   tworząca, a nie destrukcyjna. */
.admin-add{
  flex:none;padding:0 16px;height:38px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(93,220,122,0.45);background:rgba(93,220,122,0.14);color:#9ce6a4;
  font:800 11px/1 var(--font-family);letter-spacing:.08em;
  transition:background .16s ease;
}
.admin-add:hover{background:rgba(93,220,122,0.24)}
.admin-toolbar .auth-input{flex:1;min-width:0}
.admin-count{
  flex:1;color:rgba(255,255,255,0.5);
  font:700 11px/1 var(--font-family);letter-spacing:.08em;
}

/* ---- LISTY (użytkownicy, bany, komendy) ----------------------------------- */
.admin-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:46dvh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) transparent;
}
.admin-list::-webkit-scrollbar{width:8px}
.admin-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:6px}

.admin-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:11px;
  border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);
}
.admin-row-main{flex:1;min-width:0}
.admin-row-nick{
  font:800 13px/1.2 var(--font-family);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.admin-row-sub{
  margin-top:3px;color:rgba(255,255,255,0.45);
  font:600 11px/1.3 var(--font-family);
}
.admin-row-actions{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.admin-mini{
  border:1px solid rgba(255,255,255,0.16);border-radius:8px;background:transparent;
  color:rgba(255,255,255,0.8);cursor:pointer;padding:6px 10px;
  font:800 10px/1 var(--font-family);letter-spacing:.06em;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.admin-mini:hover{background:rgba(255,255,255,0.12);color:#fff}
.admin-mini.is-danger{border-color:rgba(255,92,92,0.4);color:#ff9c9c}
.admin-mini.is-danger:hover{background:rgba(255,92,92,0.16)}
.admin-mini.is-good{border-color:rgba(120,220,150,0.4);color:#9ce6a4}
.admin-mini.is-good:hover{background:rgba(120,220,150,0.14)}

/* Plakietki rang i kar. */
.admin-badge{
  display:inline-block;padding:3px 7px;border-radius:5px;margin-right:6px;
  font:900 9px/1 var(--font-family);letter-spacing:.1em;vertical-align:1px;
}
.admin-badge-admin{background:rgba(255,92,92,0.18);color:#ff9c9c}
.admin-badge-mod{background:rgba(61,220,132,0.16);color:#7ee8a8}
.admin-badge-ban{background:rgba(255,92,92,0.18);color:#ff9c9c}
.admin-badge-timeout{background:rgba(255,193,7,0.16);color:#ffcf6b}
.admin-badge-bot{background:rgba(74,163,255,0.18);color:#8ec7ff}

.admin-empty{
  padding:26px 12px;text-align:center;color:rgba(255,255,255,0.4);
  font:600 12px/1.5 var(--font-family);
}

/* ---- STOPKA --------------------------------------------------------------- */
.admin-foot{
  display:flex;align-items:center;gap:16px;
  padding:14px clamp(18px,2.4vw,28px) 18px;
  border-top:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.25);
}
.admin-foot .auth-hint{flex:1;margin:0}
/* display:flex wygrywa z atrybutem hidden — bez tej reguły stopka zostaje na
   ekranie w zakładkach z treścią, gdzie nie ma czego zapisywać ręcznie. */
.admin-foot[hidden]{display:none}
.admin-foot .auth-submit{width:auto;min-width:190px;margin:0}

.admin-note{
  margin:14px clamp(18px,2.4vw,28px) 0;padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.82);font:600 12px/1.45 var(--font-family);
}
.admin-note[hidden]{display:none}
.admin-note.is-bad{background:rgba(255,74,74,0.12);border-color:rgba(255,74,74,0.35);color:#ff9c9c}

/* ---- OKNO KOMENDY BOTA ---------------------------------------------------- */
.cmd-modal{z-index:10001}
.cmd-panel{width:min(620px,100%)}
.cmd-panel .admin-foot{justify-content:flex-end;gap:10px}
.cmd-panel .auth-row-btn{height:46px;padding:0 22px}
.cmd-panel .auth-submit{min-width:200px}

/* ---- TELEFON --------------------------------------------------------------- */
@media(max-width:820px){
  .admin-modal{padding:0}
  .admin-panel{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .admin-grid{grid-template-columns:minmax(0,1fr)}
  .admin-foot{flex-direction:column;align-items:stretch;gap:10px}
  .admin-foot .auth-submit{width:100%}
  .admin-list{max-height:none}
}

/* ---- ZAKŁADKI Z TREŚCIĄ (DYSKOGRAFIA / PŁYTA) -----------------------------
   Wiersze są tu znacznie wyższe niż na listach użytkowników — mieszczą komplet
   pól pozycji, a przy płycie całą tracklistę. Dlatego własny limit wysokości
   (listy w tych zakładkach są jedyną treścią panelu) i własna siatka pól. */
.content-list{max-height:min(58dvh,560px);gap:12px}

.content-row{
  padding:14px;border-radius:13px;
  border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.035);
}
/* Ukryte na stronie, ale nieskasowane — przygaszone, żeby było widać na pierwszy
   rzut oka, że tej pozycji widz nie zobaczy. */
.content-row.is-hidden-row{opacity:.5}

.content-row-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.content-row-title{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#fff;font:800 13px/1.2 var(--font-family);letter-spacing:.04em;
}
.content-row-tools{display:flex;gap:6px;flex:none}

.content-btn{
  padding:0 10px;height:30px;border-radius:8px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.8);
  font:800 10px/1 var(--font-family);letter-spacing:.07em;
  transition:background .16s ease,border-color .16s ease;
}
.content-btn:hover{background:rgba(255,255,255,0.13)}
.content-btn:disabled{opacity:.45;cursor:default}
.content-btn.is-danger{border-color:rgba(255,74,74,0.34);color:#ff9c9c}
.content-btn.is-danger:hover{background:rgba(255,74,74,0.16)}

.content-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.content-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.content-field-wide{grid-column:1/-1;margin-top:10px}
.content-field-label{
  color:rgba(255,255,255,0.5);
  font:700 10px/1 var(--font-family);letter-spacing:.09em;
}
.content-field .auth-input{height:38px}

/* Próbnik koloru: natywny <input type=color> wygląda w każdej przeglądarce
   inaczej, więc zdejmujemy jego chrom i zostawiamy samą płytkę koloru. */
.content-color{
  width:100%;height:38px;padding:3px;cursor:pointer;
  border-radius:9px;border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
}
.content-color::-webkit-color-swatch-wrapper{padding:0}
.content-color::-webkit-color-swatch{border:0;border-radius:6px}

.content-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Przyciski w polu pliku stoją obok siebie, a nie rozciągają się na szerokość
   kolumny — .content-field jest kolumną flex, która domyślnie je rozpycha. */
.content-field-wide > .content-btn{align-self:flex-start;margin-top:8px}
.content-upload-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,0.55);
  font:600 11px/1.3 var(--font-family);
}

/* ---- TRACKLISTA W PANELU --------------------------------------------------- */
.content-tracks{
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.09);
}
.content-tracks-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.content-tracks-head .content-field-label{flex:1}

.content-track{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.content-track-no{
  flex:none;width:24px;color:rgba(255,255,255,0.35);
  font:800 11px/1 var(--font-family);
}
.content-track .auth-input{height:34px;font-size:12px}
.content-track-title{flex:3;min-width:0}
.content-track-dur{flex:none;width:64px;text-align:center}
.content-track-sp{flex:2;min-width:0}

@media(max-width:820px){
  .content-list{max-height:none}
  .content-grid{grid-template-columns:minmax(0,1fr)}
  /* Na telefonie wiersz utworu w jednej linii byłby nieklikalny — łamiemy go
     na dwie: tytuł u góry, czas + link + narzędzia pod spodem. */
  .content-track{flex-wrap:wrap}
  .content-track-title{flex:1 1 100%;order:1}
  .content-track-no{order:0}
  .content-track-dur{order:2}
  .content-track-sp{flex:1 1 auto;order:3}
  .content-track .content-row-tools{order:4}
}

/* ---- PRZESTAWIANIE ZAKŁADEK (js/admin-tabs.js) ----------------------------
   Zakładek jest sporo i każdy używa innych, więc pasek można sobie ułożyć.
   touch-action:none na zakładkach jest KONIECZNE: bez tego przeglądarka na
   telefonie potraktuje przeciągnięcie jako przewijanie paska i zdarzenia
   pointermove przestaną przychodzić w połowie gestu. */
/* pan-x, NIE none: pasek z ośmioma zakładkami trzeba móc przewinąć palcem.
   Na dotyku układanie włącza się dopiero po przytrzymaniu (js/admin-tabs.js),
   i dopiero wtedy blokujemy przewijanie klasą .is-grabbing. */
.admin-tab{touch-action:pan-x;user-select:none;-webkit-user-select:none}
.admin-tabs.is-reordering .admin-tab{touch-action:none}

/* Chwyt widoczny dopiero przy najechaniu — pasek ma zostać czysty. */
.admin-tab:hover{cursor:grab}
.admin-tab.is-dragging{
  cursor:grabbing;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border-radius:9px 9px 0 0;
  opacity:.9;
}
/* W trakcie układania sąsiedzi płynnie robią miejsce. */
.admin-tabs.is-reordering .admin-tab:not(.is-dragging){
  transition:transform .16s ease;
}
/* Podpowiedź, że pasek da się układać — pojawia się tylko przy najechaniu na
   pasek i tylko na urządzeniach ze wskaźnikiem (na dotyku nie ma hovera). */
@media(hover:hover){
  .admin-tabs{position:relative}
  .admin-tabs::after{
    content:'przeciągnij, aby ułożyć';
    position:absolute;right:clamp(18px,2.4vw,28px);bottom:6px;
    color:rgba(255,255,255,0.28);
    font:600 9px/1 var(--font-family);letter-spacing:.08em;
    opacity:0;transition:opacity .2s ease;pointer-events:none;
  }
  .admin-tabs:hover::after{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .admin-tabs.is-reordering .admin-tab:not(.is-dragging){transition:none}
}