/* ========================================================= LEW JUDY / UWIELBIENIE KARMEL DARK THEME 2026-08-19 ========================================================= */
/* ========================================================= ZMIENNE DARK MODE ========================================================= */
 body.dark-mode {
	 --dark-bg: #101216;
	 --dark-card: #181b21;
	 --dark-card-2: #1d2127;
	 --dark-panel: #22262d;
	 --dark-panel-hover: #2b3038;
	 --dark-input: #111419;
	 --dark-text: #e7e9ed;
	 --dark-text-soft: #c5cad2;
	 --dark-text-muted: #8f96a1;
	 --dark-border: #363c45;
	 --dark-border-soft: #292e35;
	 --dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, .38);
	 --dark-shadow-md: 0 4px 14px rgba(0, 0, 0, .48);
	 --dark-shadow-lg: 0 8px 28px rgba(0, 0, 0, .60);
	 background-color: var(--dark-bg);
	 color: var(--dark-text);
}
/* ========================================================= BODY / GŁÓWNE TŁO ========================================================= */
 body.dark-mode, body.dark-mode html {
	 background-color: #101216;
	 color: #e7e9ed;
}
 body.dark-mode #container, body.dark-mode #content {
	 background: transparent;
	 color: var(--dark-text);
}
/* ========================================================= NAWIGACJA ========================================================= */
 body.dark-mode #navbar nav {
	 background: linear-gradient( 90deg, #ffa700, #e87900 );
	 box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}
 body.dark-mode .logo {
	 color: #fff;
}
 body.dark-mode #navbar nav ul li a {
	 color: #fff;
}
 body.dark-mode #navbar nav ul li:hover {
	 text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
 body.dark-mode #navbar-menu {
	/* background: rgba(28, 25, 20, .97);*/
	 /*box-shadow: 0 8px 20px rgba(0, 0, 0, .55);*/
}
 body.dark-mode #navbar-menu li a {
	 color: #fff;
}
 body.dark-mode #navbar-menu li a:hover {
	 background: rgba(255, 167, 0, .16);
}
/* ========================================================= MENU ========================================================= */
 body.dark-mode #menu {
	 background: var(--dark-card);
	 color: var(--dark-text);
	 box-shadow: var(--dark-shadow-sm);
}
 body.dark-mode #menu ul li {
	 background: var(--dark-card-2);
	 border-color: var(--dark-border);
	 color: var(--dark-text);
}
 body.dark-mode #menu ul li:hover {
	 background: rgba(255, 167, 0, .12);
	 box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
 body.dark-mode #menu ul li a {
	 color: var(--dark-text);
}
 body.dark-mode #menu li.selected {
	 background: #315b80;
	 border-color: #4384ba;
	 color: #fff;
}
 body.dark-mode #menu li.selected:hover {
	 background: #39709d;
	 color: #fff;
}
/* ========================================================= WYSZUKIWARKA ========================================================= */
 body.dark-mode #songSearchContainer {
	 background: #ffa700;
}
 body.dark-mode .song-search-item {
	 background: var(--dark-card-2);
}
 body.dark-mode #songSearchContainer input, body.dark-mode .song-search-item input {
	 background: var(--dark-input);
	 color: #f3f4f6;
	 border-color: var(--dark-border);
}
 body.dark-mode #songSearchContainer input::placeholder, body.dark-mode .song-search-item input::placeholder {
	 color: #737a85;
}
 body.dark-mode #songSearchContainer input:focus, body.dark-mode .song-search-item input:focus {
	 border-color: #ffa700;
	 outline: none;
	 box-shadow: 0 0 0 3px rgba(255, 167, 0, .18);
}
 body.dark-mode .song-search-clear {
	 color: #9aa1ac;
}
 body.dark-mode .song-search-clear:hover {
	 color: #fff;
}
/* ========================================================= GŁÓWNA ZAWARTOŚĆ ========================================================= */
 body.dark-mode #displayContent {
	 background: var(--dark-card);
	 color: var(--dark-text);
	 box-shadow: var(--dark-shadow-sm);
}
 body.dark-mode #displayContent:empty:before {
	 content: "Treść piosenki...";
	 color: #747c88;
}
 body.dark-mode #songTitle {
	 color: #ff9d00;
}
/* ========================================================= TEKST PIOSENKI ========================================================= */
 body.dark-mode .lyric_block, body.dark-mode div#lyrics, body.dark-mode #lyrics, body.dark-mode .chordpro, body.dark-mode .chordpro .lyrics {
	 color: var(--dark-text);
}
 body.dark-mode .song-title {
	 color: var(--dark-text);
}
 body.dark-mode .song-title-container a {
	 color: var(--dark-text);
}
 body.dark-mode .chord, body.dark-mode .chordpro .chord {
	 color: #ff5a5a;
}
 body.dark-mode .song-title-container .fa-youtube {
	 color: #ff3030;
}
 body.dark-mode .song-title-container .fa-edit {
	 color: #45e08a;
}
 body.dark-mode #transposeIcon.fas.fa-music, body.dark-mode #transposeValue {
	 color: #ffa700;
}
/* ========================================================= POPRZEDNIA / NASTĘPNA ========================================================= */
 body.dark-mode #prevnextBtn button {
	 background: #474747;
	 color: #ff8100;
	 box-shadow: var(--dark-shadow-sm);
}
 body.dark-mode #prevnextBtn button:hover {
	 background: #472e00;
}
/* ========================================================= OGÓLNE LISTY ========================================================= */
 body.dark-mode li {
	 background-color: var(--dark-card-2);
	 border-color: var(--dark-border);
	 color: var(--dark-text);
}
/* ========================================================= TABELKI ========================================================= */
 body.dark-mode table {
	 background: var(--dark-card);
	 color: var(--dark-text);
}
 body.dark-mode th, body.dark-mode td {
	 border-color: var(--dark-border);
	 color: var(--dark-text);
}
 body.dark-mode th {
	 background: var(--dark-panel);
	 color: #f1f3f5;
}
 body.dark-mode tr:hover td {
	 background: rgba(255, 255, 255, .025);
}
/* ========================================================= FORMULARZE ========================================================= */
 body.dark-mode form {
	 background: var(--dark-card);
	 color: var(--dark-text);
	 box-shadow: var(--dark-shadow-md);
}
 body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="url"], body.dark-mode input[type="number"], body.dark-mode textarea, body.dark-mode select {
	 background: var(--dark-input);
	 color: #f3f4f6;
	 border-color: var(--dark-border);
}
 body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
	 color: #707782;
}
 body.dark-mode input[type="text"]:focus, body.dark-mode input[type="email"]:focus, body.dark-mode input[type="password"]:focus, body.dark-mode input[type="url"]:focus, body.dark-mode input[type="number"]:focus, body.dark-mode textarea:focus, body.dark-mode select:focus {
	 border-color: #ff8100;
	 background: #15181d;
	 color: #fff;
	 box-shadow: 0 0 0 3px rgba(255, 129, 0, .20);
}
 body.dark-mode option {
	 background: #181b21;
	 color: #f3f4f6;
}
 body.dark-mode fieldset {
	 color: var(--dark-text);
}
 body.dark-mode legend.css-14lo706 {
	 color: #aeb4bf;
}
/* ========================================================= PRZYCISKI ========================================================= */
 body.dark-mode button {
	 color: var(--dark-text);
}
 body.dark-mode button[type="submit"], body.dark-mode button[type="button"] {
	 background: #ffa700;
	 color: #fff;
}
 body.dark-mode button[type="submit"]:hover, body.dark-mode button[type="button"]:hover {
	 background: #e87900;
}
 body.dark-mode button.disabled {
	 background: #393e46;
	 color: #858b95;
	 border-color: #4a5059;
}
 body.dark-mode #tools button {
	 background: #474747;
	 color: #fff;
}
 body.dark-mode #tools button:hover {
	 background: #472e00;
}
 body.dark-mode #tools .tools-export button {
	 background: #454b54;
	 color: #eee;
}
 body.dark-mode #tools .tools-export button:hover {
	 background: #006bd6;
}
/* ========================================================= PRZYCISKI ADMIN ========================================================= */
 body.dark-mode #save {
	 background: #16a34a;
	 color: #fff;
}
 body.dark-mode #del {
	 background: #dc2626;
	 color: #fff;
}
 body.dark-mode #cancel {
	 background: #59616d;
	 color: #fff;
}
 body.dark-mode #send {
	 background: #ffcf00;
	 color: #181818;
}
/* ========================================================= EDYTOR ========================================================= */
 body.dark-mode #editForm {
	 background: #171a1f;
	 color: #e7e9ed;
	 box-shadow: var(--dark-shadow-lg);
}
 body.dark-mode #editForm fieldset {
	 background: #1e2228;
	 border-color: #3a4049;
}
 body.dark-mode #editForm legend {
	 color: #a7adb7;
}
 body.dark-mode #editForm input {
	 background: #111419;
	 color: #f3f4f6;
	 border-color: #3a4049;
}
 body.dark-mode .lyrics_edit {
	 background: #111419;
	 color: #f1f3f5;
	 border-color: #3a4049;
}
 body.dark-mode .lyrics_edit:focus {
	 border-color: #ffa700;
	 box-shadow: 0 0 0 3px rgba(255, 167, 0, .15);
}
 body.dark-mode .button_edit {
	 background: #272c33;
	 border-color: #414750;
	 color: #e7e9ed;
}
 body.dark-mode .button_edit:hover {
	 background: #353b44;
}
/* ========================================================= MODALE ========================================================= */
 body.dark-mode .modal-overlay {
	 background: rgba(0, 0, 0, .78);
}
 body.dark-mode .modal {
	 background: #181b21;
	 color: #e7e9ed;
	 box-shadow: var(--dark-shadow-lg);
}
 body.dark-mode .modal-header {
	 border-bottom-color: #353a42;
}
 body.dark-mode .modal-footer {
	 border-top-color: #353a42;
	 background: #181b21;
}
 body.dark-mode .modal-body {
	 color: var(--dark-text);
}
 body.dark-mode .modal label {
	 color: #cdd1d8;
}
 body.dark-mode .modal input, body.dark-mode .modal textarea, body.dark-mode .modal select {
	 background: #111419;
	 color: #f1f3f5;
	 border-color: #3b414a;
}
 body.dark-mode .modal input:focus, body.dark-mode .modal textarea:focus, body.dark-mode .modal select:focus {
	 border-color: #007eff;
	 background: #15181d;
	 color: #fff;
}
 body.dark-mode .modal-close {
	 color: #aeb4bf;
}
 body.dark-mode .modal-close:hover {
	 color: #fff;
}
 body.dark-mode button[data-close] {
	 background: #343a43;
	 color: #e7e9ed;
}
 body.dark-mode button[data-close]:hover {
	 background: #454c57;
}
 body.dark-mode button.danger {
	 background: #dc2626;
}
 body.dark-mode button.danger:hover {
	 background: #b91c1c;
}
/* ========================================================= INFORMACJE UŻYTKOWNIKA ========================================================= */
 body.dark-mode .user-info p {
	 color: #c4c9d1;
}
 body.dark-mode .user-info-block .label {
	 color: #8f96a1;
}
 body.dark-mode .user-info-block .value {
	 color: #f1f3f5;
}
 body.dark-mode .user-info-block .icon {
	 color: #ffa700;
}
 body.dark-mode .user-event-time {
	 color: #8f96a1;
}
/* ========================================================= LICZNIKI ========================================================= */
 body.dark-mode .song-count-item {
	 background: #252a31;
	 border-color: #3b4149;
	 color: #e7e9ed;
}
 body.dark-mode .song-count-item:hover {
	 background: #303943;
}
 body.dark-mode .song-count-item.total {
	 background: #19343a;
	 border-color: #28545c;
}
 body.dark-mode .song-count-item.displayed {
	 background: #1d3928;
	 border-color: #315e3f;
}
 body.dark-mode .song-count-item.new {
	 background: #3c2b19;
	 color: #ff9a6a;
	 border-color: #684526;
}
 body.dark-mode .song-count-item.ranking {
	 background: #302742;
	 border-color: #51416d;
}
 body.dark-mode .song-count-item .count-label {
	 color: #b8bec7;
}
/* ========================================================= KATEGORIE ========================================================= */
 body.dark-mode .category-button {
	 background: #2b3037;
	 color: #f1f3f5;
}
 body.dark-mode .category-button:hover {
	 background: #3a414a;
}
 body.dark-mode .category-button.selected {
	 background: #ffa700;
	 color: #161616;
}
/* ========================================================= SORTOWANIE ========================================================= */
 body.dark-mode .song-item {
	 background: #1d2127;
	 border-color: #3a4048;
	 color: var(--dark-text);
}
 body.dark-mode .song-item:hover {
	 background: #292e36;
}
 body.dark-mode #sortedList li {
	 background: #183622;
	 border-color: #26723b;
	 color: #dff7e5;
}
 body.dark-mode #sortingList li.selected {
	 background: #315b80;
	 color: #fff;
	 border-color: #4384ba;
}
 body.dark-mode .sorting-item {
	 background: #292e35;
	 border-bottom-color: #3c424b;
	 color: #e7e9ed;
}
 body.dark-mode .sorting-name {
	 color: #e7e9ed;
}
 body.dark-mode .delete-song {
	 color: #ff5555;
}
 body.dark-mode .delete-sorting {
	 color: #ff7777;
}
/* ========================================================= LINKI ========================================================= */
 body.dark-mode .links-container li {
	 background: #1c2026;
	 border-color: #393f48;
}
 body.dark-mode .link-item {
	 color: var(--dark-text);
}
 body.dark-mode .link-item a {
	 color: #e7e9ed;
}
 body.dark-mode .link-item a:hover {
	 color: #ffa700;
}
 body.dark-mode .link-item .delete-link {
	 color: #ff5555;
}
 body.dark-mode #link-form_sharing input, body.dark-mode #link-form_sharing textarea {
	 background: #111419;
	 color: #f1f3f5;
	 border-color: #3b414a;
}
 body.dark-mode #link-form_sharing button {
	 background: #087f57;
	 color: #fff;
}
/* ========================================================= PLAKATY ========================================================= */
 body.dark-mode .poster-tile {
	 background: #181b21;
	 box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
 body.dark-mode .poster-title {
	 background: #181b21;
	 color: #e7e9ed;
}
 body.dark-mode .poster-admin-overlay button {
	 background: rgba(10, 12, 15, .90);
}
 body.dark-mode .poster-admin-overlay button:hover {
	 background: #2563eb;
}
 body.dark-mode .poster-admin-overlay .poster-delete:hover {
	 background: #dc2626;
}
 body.dark-mode .poster-fullscreen, body.dark-mode .poster-overlay {
	 background: rgba(0, 0, 0, .92);
}
/* ========================================================= KALENDARZ ========================================================= */
 body.dark-mode #calendar {
	 background: #181b21;
	 box-shadow: var(--dark-shadow-md);
}
 body.dark-mode .fc {
	 color: #e7e9ed;
}
 body.dark-mode .fc .fc-toolbar-title {
	 color: #ff9d00;
}
 body.dark-mode .fc-theme-standard td, body.dark-mode .fc-theme-standard th {
	 border-color: #343941;
}
 body.dark-mode .fc-daygrid-day {
	 background: #181b21;
	 border-color: #343941;
}
 body.dark-mode .fc-daygrid-day:hover {
	 background: rgba(255, 167, 0, .10);
}
 body.dark-mode .fc-daygrid-day-number {
	 color: #dfe3e8;
}
 body.dark-mode .fc .fc-day-today {
	 background: rgba(255, 167, 0, .13);
}
 body.dark-mode .fc-daygrid-day.fc-day-other {
	 background: #14171b;
}
 body.dark-mode .sunday-cell {
	 background: rgba(255, 0, 0, .09);
}
 body.dark-mode .saturday-cell {
	 background: rgba(0, 128, 0, .07);
}
 body.dark-mode .fc-event {
	 background: #5d626b;
	 color: #fff;
	 border-color: #707680;
}
 body.dark-mode .fc-event:hover {
	 background: #4caf50;
}
 body.dark-mode .fc-event.fc-draggable {
	 border-color: #ffa700;
}
 body.dark-mode .fc-event-title {
	 color: #fff;
}
 body.dark-mode .fc-event:hover::after {
	 background: rgba(15, 17, 21, .96);
	 color: #fff;
}
/* ========================================================= COLOR PICKER ========================================================= */
 body.dark-mode #modalColor {
	 background: #111419;
	 border-color: #3b414a;
}
/* ========================================================= CHECKBOXY ========================================================= */
 body.dark-mode input[type="checkbox"] {
	 accent-color: #ffa700;
}
 body.dark-mode .vis-flag {
	 color: #aab1bc;
}
/* ========================================================= ADMIN BUTTON ========================================================= */
 body.dark-mode .admin-button i {
	 color: #fff;
}
/* ========================================================= LINKI ========================================================= */
 body.dark-mode a {
	 color: #f0a020;
}
 body.dark-mode a:hover {
	 color: #ffbd4a;
}
/* ========================================================= FULLSCREEN ========================================================= */
 body.dark-mode #fullscreenOverlay {
	 background: #101216;
	 color: #e7e9ed;
}
/* ========================================================= SCROLLBARY ========================================================= */
 body.dark-mode {
	 scrollbar-color: #4a5059 #15181c;
}
 body.dark-mode * {
	 scrollbar-color: #4a5059 #15181c;
}
 body.dark-mode *::-webkit-scrollbar {
	 width: 9px;
	 height: 9px;
}
 body.dark-mode *::-webkit-scrollbar-track {
	 background: #15181c;
}
 body.dark-mode *::-webkit-scrollbar-thumb {
	 background: #4a5059;
	 border-radius: 10px;
	 border: 2px solid #15181c;
}
 body.dark-mode *::-webkit-scrollbar-thumb:hover {
	 background: #626a76;
}
/* ========================================================= SELEKCJA TEKSTU ========================================================= */
 body.dark-mode ::selection {
	 background: rgba(255, 167, 0, .35);
	 color: #fff;
}
/* ========================================================= FOCUS ========================================================= */
 body.dark-mode button:focus-visible, body.dark-mode input:focus-visible, body.dark-mode textarea:focus-visible, body.dark-mode select:focus-visible, body.dark-mode a:focus-visible {
	 outline: 2px solid #ffa700;
	 outline-offset: 2px;
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 768px) {
	 body.dark-mode #menu {
		 background: #181b21;
	}
	 body.dark-mode #menu ul li {
		 background: #1d2127;
		 border-color: #383e46;
	}
	 body.dark-mode #displayContent {
		 background: #181b21;
	}
	 body.dark-mode .song-search-item {
		 background: #1d2127;
	}
	 body.dark-mode .category-button {
		 background: #2b3037;
	}
	 body.dark-mode #navbar-menu {
		 background: rgba(28, 25, 20, .98);
	}
}
/* ========================================================= KONIEC DARK CSS ========================================================= */

/* =========================================
   PRZYCISK TRYBU JASNY / CIEMNY
   Taki sam styl jak admin-button
   ========================================= */

.theme-toggle {
  background: none !important;
  border: none !important;
  padding: 6px !important;
  margin: 0 !important;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: none !important;
  border-radius: 0;
  width: auto;
  height: auto;
}

.theme-toggle i {
  color: #fff !important;
  font-size: 18px;

  transition: transform 0.2s ease, filter 0.2s ease;
}

.theme-toggle:hover i {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.45));
}

.theme-toggle:active i {
    transform: scale(.92);
}

body.dark-mode .theme-toggle i {
    color: #ffd166 !important;
    filter: drop-shadow(0 0 4px rgba(255,209,102,.65));
}
/* Bez obrotu */
.theme-toggle:hover i {
  transform: none;
}


/* =========================================
   TEKST UKRYTY
   ========================================= */

.theme-toggle-text {
  display: none;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .theme-toggle {
    padding: 6px;
  }

  .theme-toggle i {
    font-size: 18px;
  }
}