/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #191919;
color: #f5f5f5;
padding: 30px;
}

/* HEADINGS */
h2 {
margin-bottom: 15px;
}

h3 {
margin: 25px 0 10px;
}

/* LINK */
a {
text-decoration: none;
color: #fff;
background: #F5322C;
padding: 8px 14px;
border-radius: 6px;
transition: 0.2s;
display: inline-block;
}

a:hover {
background: #d92a25;
}

/* HR */
hr {
margin: 30px 0;
border: none;
height: 1px;
background: #333;
}

/* ===== FORM ===== */
form {
background: #222;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
max-width: 600px;
}

/* INPUT */
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #333;
border-radius: 6px;
background: #191919;
color: #fff;
}

input:focus, textarea:focus {
border-color: #F5322C;
outline: none;
}

/* BUTTON */
button {
background: #F5322C;
color: white;
border: none;
padding: 10px 14px;
margin: 5px 5px 5px 0;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
}

button:hover {
background: #d92a25;
}

/* SECONDARY */
button[type="button"] {
background: #333;
}

button[type="button"]:hover {
background: #444;
}

/* USERS DROPDOWN */
#usersBox {
display: none;
border: 1px solid #333;
border-radius: 8px;
background: #191919;
max-height: 220px;
overflow-y: auto;
padding: 10px;
}

/* UKRYCIE DOMYŚLNEGO CHECKBOXA */
.userBox {
display: none;
}

label {
position: relative;
padding-left: 35px;
cursor: pointer;
display: block;
margin: 6px 0;
}

/* CUSTOM BOX */
label::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 22px;
height: 22px;
border: 2px solid #F5322C;
border-radius: 6px;
background: #191919;
}

/* ✅ POPRAWKA */
label:has(.userBox:checked)::before {
background: #F5322C;
border-color: #F5322C;
}

label:has(.userBox:checked)::after {
content: "";
position: absolute;
left: 7px;
top: 6px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* TABLE */
table {
width: 100%;
border-collapse: collapse;
background: #222;
border-radius: 12px;
overflow: hidden;
margin-top: 10px;
text-align: center;
}

/* HEADER */
th {
background: #F5322C;
color: white;
padding: 12px;
text-align: left;
}

/* CELLS */
td {
padding: 12px;
border-bottom: 1px solid #333;
}

/* ROW HOVER */
tr:hover {
background: #2a2a2a;
}

/* DELETE BUTTON */
td form {
background: none;
padding: 0;
box-shadow: none;
}

td form button {
background: #c0392b;
}

td form button:hover {
background: #a93226;
}

/* STATUS MESSAGE */
.msg {
margin: 10px 0;
padding: 10px;
background: #222;
border-left: 4px solid #F5322C;
border-radius: 6px;
}

/* ERROR */
.error {
color: #F5322C;
margin-top: 10px;
}

/* CLICKABLE HEADER */
h4 {
margin-top: 15px;
cursor: pointer;
color: #ccc;
}

h4:hover {
color: #fff;
}

/* ===== LOGIN PAGE ===== */

.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at top, #222 0%, #191919 60%);
}

.login-container {
background: #222;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
width: 100%;
max-width: 400px;
text-align: center;
animation: fadeIn 0.4s ease;
}

.login-container h2 {
margin-bottom: 20px;
font-weight: 600;
}

.login-container input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #333;
border-radius: 8px;
background: #191919;
color: #fff;
transition: 0.2s;
}

.login-container input:focus {
border-color: #F5322C;
box-shadow: 0 0 8px rgba(245, 50, 44, 0.3);
outline: none;
}

.login-container button {
width: 100%;
padding: 12px;
margin-top: 10px;
border-radius: 8px;
font-weight: bold;
background: linear-gradient(135deg, #F5322C, #d92a25);
}

.login-container button:hover {
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(245, 50, 44, 0.3);
}

.error {
margin-top: 15px;
color: #F5322C;
font-size: 14px;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ===== STATS ===== */

.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin: 20px 0 30px;
}

.card {
background: #222;
padding: 20px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: 0.2s;
}

.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.card h4 {
margin-bottom: 10px;
color: #ccc;
font-size: 14px;
}

.card p {
font-size: 28px;
font-weight: bold;
color: #F5322C;
}