/* Reset stylów */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}

/* Górna nawigacja */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0d0d0d;
    color: white;
    padding: 4px 10px 0px 10px;
    position: relative;
    width: 100%;
    z-index: 1000;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
	padding:0px 10px;
}
/* Animacja falowania liter w logo */
.logo span {
    display: inline-block;
    animation: wave 1.5s infinite ease-in-out;
}

/* Op¨®?nienie dla ka?dej litery */
.logo span:nth-child(1) { animation-delay: 0s; }
.logo span:nth-child(2) { animation-delay: 0.2s; }
.logo span:nth-child(3) { animation-delay: 0.4s; }

/* Definicja animacji */
@keyframes wave {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.8); }
}
/* Du?e menu - widoczne tylko na wi?kszych ekranach */
.nav-menu {
    display: flex;
    gap: 20px;
    margin: 0 auto; 
    justify-content: center;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    font-size: 15px;
    padding: 6px 12px;
    transition: 0.3s;
    color: #c0c0c0;
    border-radius: 5px;
	border: 1px solid #000;
}

.nav-menu a:hover {
background-color: #fff;
  color: #000;
	box-shadow: 0 4px 6px rgba(255, 255, 255, 1);
  border-bottom: 1px solid #fff;
  border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* Sekcja u?ytkownika */
.user-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Przycisk logowania */
.login-btn {
	display:none;
    padding: 2px 12px;
	background: #444;
	color: #f0f0f0;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
	font-size: 15px;
	border: 1px solid #0000;
    background: linear-gradient(#000, #000) padding-box, linear-gradient( var(--angle), #fff, #464d53 ) border-box;
    animation: 4s rotate linear infinite;
}

.login-btn:hover {
    background: #464d53;
    color: #fff;

	border: 1px solid #fff;
    animation: 4s rotate linear infinite;
}

.language-switcher {
	padding: 2px 10px;
	background: #eee;

	text-decoration: none;
	border-radius: 4px;
	transition: 0.3s;
	font-size: 14px;
	border: 1px solid #d8d8d8;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  height: 400px;
  width: 400px;
  border: 3px solid #0000;
  border-radius: 12px;
  background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
        var(--angle),
        #070707,
        #687aff
      ) border-box;
  animation: 8s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Przycisk hamburgera */
.menu-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 10px 10px 10px 10px;	
    display: none;
}

/* Ukrywanie checkboxa */
.menu-checkbox {
    display: none;
}

/* Mobile menu - domy?lnie ukryte */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #0d0d0d;
    padding: 10px;
    text-align: center;
    position: relative;
    width: 100%;
    left: 0;
    top: calc(100% + 5px);
    z-index: 999;
}

/* Linki w mobile menu */
.mobile-menu a {
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    width: 100%;
}


/* Drugi navbar (sub-navbar) - tylko na desktopie */
.subbar {
    display: flex;
    background: #fff;
	font-size:13px;
    position: relative;
    width: 100%;
	border-bottom:1px solid #c8c8c8;
	justify-content: center;
    align-items: center;

}

.subbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.subbar li {
    padding: 8px 15px;
}

.subbar a {
    text-decoration: none;
    color: #222;
}
.subbar a:hover {

    color: #222;
	border-bottom:1px solid #222;
}

/* Responsywno?? */
@media screen and (max-width: 768px) {
	.sidebar {
	        display: none;
    }	
	.subbar
	{
			padding: 0px 1rem 0px 1rem;
	}

    .nav-menu {
        display: none;
    }


    .menu-btn {
        display: block;
    }

    /* Pokazuje mobile menu po klikni?ciu w hamburgera */
    #mobile-menu-toggle:checked ~ .mobile-menu {
        display: flex;

    }
	
	.mobile-menu a:hover {
		background-color: #464d53;
		color: #ffffff;
	}	
}

@media screen and (min-width: 768px) {
	
	.subbar{
			padding: 0px 6rem 0px 1rem;
	}
/* Kontener sidebaru */
	.sidebar {
	  width: 64px;

	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  position: relative;
	  left: 0;
	  border-right: 1px solid #c8c8c8;
	}
	
	/* Styl dla ikon */
.sidebar a {
	color: #c8c8c8; /* Neutralny kolor ikon */
	font-size: 22px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	transition: background 0.3s, color 0.3s;
    border-bottom: 1px solid #c8c8c8;
}

/* Efekt hover */
.sidebar a:hover {
	background: #2b2f3a; /* Delikatne podświetlenie */
	color: #ffffff; /* Zmiana koloru ikon */
}

/* Odstęp na górze dla estetyki */
.sidebar .spacer {
 height: 90px;
    width: 100%;
}
}
.main
{
	padding: 15px;
  width: 100%;
    flex-grow: 1;
}

.main .page-header .details {
	padding-top: 1rem;
	font-size: 0.9rem;
}

.main .page-header .details .details-code {
    background: #f8f8ff;
    color: #000;
	padding: 10px;
	border-radius: 5px;
	font-family: monospace;
}
.main .page-header .details .details-box {
	background: #f8f8ff;
	padding: 10px;
	border-left: 4px solid #000;
	margin-bottom: 10px;
}
.main .page-header .details .details-box ul {
  list-style: none;
}

.main .page-header .details h2 {
padding-top:1rem;
font-size: 0.95rem;
}

.main .page-header .details H2.header:after {
content:' ';
position: absolute;
top:100%;
left:50%;
width: 100px;
border:2px solid #DAF0ED;
border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
transform:translateX(-50%);
}

body{
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.main h2{
	padding-bottom:0.5rem;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

pre span{
	font-weight:bold;
	text-decoration:underline;
}


#footer{
	position: relative !important;
	display:flex;
	border-top: 1px solid #c8c8c8;
    background: #eee;
	
}

#content{
	position:relative;
	DISPLAY:FLEX;
	flex-grow:1;

}

#content h2{
	position:relative;

}



#footer .container {

  margin: 10px auto;
}

/* do grida */
.result{
	padding-top:1rem;
	padding-bottom:1rem;
}
.grid-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 400px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.grid-header {
    background: #e6e6e6;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.grid-row {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.grid-row:last-child {
    border-bottom: none;
}

/* formularz *

/* Stylizacja kontenera formularza */
/* Kontener formularza */
.form-container {
    max-width: 420px;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
  /*  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);*/
  margin-top: 1rem;
}

/* Etykiety */
.form-container label {
    display: block;
    font-weight: bold;
    font-size: 14px;
	
	margin-top: 5px;
    margin-bottom: 5px;
    color: #333;
}

/* Pola wej?ciowe */
.form-container input[type="text"] {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 15px;
    background: #fff;
    color: #333;
    transition: border 0.2s;
}

/* Efekt focus */
.form-container input[type="text"]:focus {
    border-color: #888;
    outline: none;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.3);
}

/* Stylizacja przycisku */
.form-container button {
    width: 100%;
    padding: 6px 12px;
    background: #ddd;
    color: black;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
	margin-top: 10px;
    transition: all 0.3s;
	border:1px solid #bbb;
	display:inline-block;

}

/* Efekt hover dla przycisku */
.form-container button:hover {
    background: #000;
	color: #fff;
	border:1px solid #000;	
}

/* Efekt aktywacji przycisku */
.form-container button:active {
    background: #444;
}

	
.htmx-indicator{
opacity:0;
transition: opacity 500ms ease-in;

}
.htmx-request .htmx-indicator{
	opacity:1;
}
.htmx-request.htmx-indicator{
	opacity:1;
}