/* === Reset / tokens === */
:root{
    --bg:#f9f9f9; --text:#111;
    --muted:#666; --border:#ccc;
    --primary:#3498db; --primary-600:#2c83bd;
    --danger:#e74c3c; --danger-600:#cf3f32;
    --success:#27ae60; --success-600:#219150;
    --surface:#fff; --surface-2:#f4f4f4; --surface-3:#f0f0f0;
    --header:#222; --footer:#333;
    --radius:10px;
    --shadow:0 0 5px rgba(0,0,0,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg); color:var(--text);
    line-height:1.5;
}
img{max-width:100%;height:auto;display:block}

/* === Layout === */
header, footer{width:100%;color:#fff}
header{
    background:var(--header); padding:1rem 2rem;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
main{padding:2rem}
footer{background:var(--footer); padding:1rem 2rem; text-align:center}

.nav-links{display:flex; gap:1rem; flex-wrap:wrap}
header a{color:#ddd;text-decoration:none;font-weight:500;transition:color .2s}
header a:hover{color:#fff}

.user-info{display:flex; gap:.5rem; align-items:center}

/* === Brand (logo + tekst) === */
.brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    text-decoration:none;
    color:#fff;
    font-size:1.5rem;
    font-weight:700;
}
.brand img{
    height:32px; /* kontrola realnej wysokości w UI */
    width:auto;
    display:block;
}

h1{text-align:center;margin:2rem 0 1rem}

/* === Wspólne komponenty === */
.search-box{text-align:center;margin:1.5rem auto}
.search-box form{position:relative;max-width:600px;margin:0 auto}
.search-input{
    width:100%; height:2.5rem; font-size:1rem; padding-left:2.5rem;
    border:1px solid var(--border); border-radius:30px; box-shadow:var(--shadow); outline:none;
}
.search-btn{
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    background:transparent; border:none; color:var(--muted); cursor:pointer; line-height:1;
}
.search-btn:hover{transform:translateY(-50%) scale(1.06)}

.green-button, .btn{
    display:inline-block; text-decoration:none; border-radius:6px;
    padding:.55rem 1rem; font-weight:700; transition:.15s background-color ease;
}
.green-button, .btn--success{background:var(--success); color:#fff}
.green-button:hover, .btn--success:hover{background:var(--success-600)}
.btn--primary{background:var(--primary); color:#fff}
.btn--primary:hover{background:var(--primary-600)}
.btn--danger{background:var(--danger); color:#fff; border:none}
.btn--danger:hover{background:var(--danger-600)}

.top-actions{text-align:center;margin:1rem auto}

/* === Formularze admin === */
.admin-form{
    max-width: 720px; margin:2rem auto; padding:0 1rem;
    display:flex; flex-direction:column; gap:1rem;
}
.admin-form label{font-weight:700; display:flex; flex-direction:column; gap:.35rem}
.admin-form input, .admin-form textarea, .admin-form select{
    padding:.55rem; font-size:1rem; font-family:inherit; border:1px solid var(--border); border-radius:6px;
}
.admin-form .form-actions{display:flex; gap:1rem; margin-top:.5rem}
.admin-form .form-actions a{background:#ddd; color:#000; text-decoration:none; padding:.6rem 1.2rem; border-radius:5px}

/* === Tabela === */
table{width:100%; border-collapse:collapse; margin-top:1.25rem; background:var(--surface)}
th, td{border:1px solid var(--border); padding:.6rem; text-align:left; vertical-align:top}
th{background:var(--surface-3)}
td .actions{display:flex; gap:.5rem}
.actions a, .actions button{padding:.4rem .8rem; border-radius:4px; font-size:.9rem; cursor:pointer; text-decoration:none; border:none}
.actions a{background:var(--primary); color:#fff}
.actions button{background:var(--danger); color:#fff}

/* === Paginacja === */
.pagination{margin-top:1.25rem; text-align:center}
.pagination a{
    margin:0 5px; padding:5px 10px; background:#eee; text-decoration:none; border-radius:3px;
}
.pagination .active a, .pagination a[aria-current="page"]{background:#333;color:#fff}

/* === Kompatybilność (zestawy) === */
.compatibility-set{
    display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
    background:var(--surface-2); padding:1rem; border-radius:6px; border:1px solid var(--border);
}
#add-compatibility{width:fit-content; margin-top:1rem}

/* === Lightbox === */
[data-lightbox-img]{
    width:80px; height:auto; margin:3px; border-radius:5px; cursor:zoom-in
}
#lightbox{
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.85); justify-content:center; align-items:center; flex-direction:column; padding:1rem;
}
#lightbox-img{max-width:90%; max-height:80%; border-radius:var(--radius)}
#lightbox-link{margin-top:1rem; background:#fff; padding:.5rem 1rem; text-decoration:none; color:#000; border-radius:6px}
#close-lightbox, #prev-image, #next-image{
    position:absolute; font-size:2rem; background:none; border:none; color:#02fadc; cursor:pointer
}
#close-lightbox{top:20px; right:30px}
#prev-image{left:20px}
#next-image{right:20px}

/* === Użyteczne drobiazgi === */
.spinner{font-style:italic; color:gray}
:focus-visible{outline:3px solid #8dd5ff; outline-offset:2px}

/* === Responsive === */
@media (max-width:768px){
    table thead{display:none}
    table, table tbody, table tr, table td{display:block; width:100%}
    table tr{margin-bottom:1rem; border-bottom:1px solid #ddd}
    table td{text-align:right; padding-left:50%; position:relative}
    table td::before{
        content: attr(data-label);
        position:absolute; left:0; width:45%; padding-left:.5rem; font-weight:700; text-align:left;
    }
}

@media (max-width:600px){
    header{flex-direction:column; align-items:flex-start}
    .nav-links{flex-direction:column; width:100%; gap:.5rem; margin-top:.5rem}
    h1{font-size:1.5rem; margin-top:1rem}
    .admin-form .form-actions{flex-direction:column}
    .admin-form .form-actions > *{width:100%; text-align:center}
    .compatibility-set{flex-direction:column; align-items:stretch}
    .green-button, .btn{width:100%}
}

/* === Utils pod CSP (zamiast inline style) === */
.inline { display: inline; }
.inline-block { display: inline-block; }
.text-center { text-align: center; }
.mt-2rem { margin-top: 2rem; }
.my-2rem { margin-top: 2rem; margin-bottom: 2rem; }

.img-thumb-100 {
    max-width:100px; max-height:100px; margin:5px; border-radius:6px; display:block;
}

.text-muted { color: var(--muted); }

/* Alerts / flash messages */
.alert {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
}
.alert--success { background: #e8fff0; border-color: #bde5c8; }
.alert--error   { background: #fff4e5; border-color: #ffd4a8; }
.alert--info    { background: #eaf4ff; border-color: #cbe0ff; }