/* --- Reset i globalne ustawienia --- */
* {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
}

/* --- Panele --- */
.panel,
.panel1 {
    text-align: center;
    margin: 30px auto;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.panel { width: 350px; }
.panel1 { max-width: 1000px; }
.panel h2 {
    margin-top: 0;
}

/* --- Linki --- */
a {
    color: #007bff;
    text-decoration: none;
    margin-left: 10px;
}
a:hover {
    text-decoration: underline;
}

/* --- Boxy --- */
.box { margin-top: 30px; }
.box h3 { margin-bottom: 10px; }

/* --- Formularze --- */
form input[type="text"],
form input[type="password"],
form textarea {
    padding: 8px;
    margin: 5px 0;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
}
form input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 5px;
}
form button {
    padding: 8px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
form button:hover {
    background-color: #218838;
}

/* --- Tabele --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 15px;
}
table th,
table td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;
}
table th {
    background-color: #f8f9fa;
    text-align: left;
}
table td textarea {
    width: 100%;
}

/* Kolumna "Nr szafki" */
table td:nth-child(5),
table th:nth-child(5) {
    min-width: 90px;
    text-align: center;
}

/* --- Formularz logowania --- */
.login-box {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    text-align: center;
}
.login-box h2 {
    margin-bottom: 20px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.login-box button {
    width: 55%;
    padding: 10px;
    margin-top: 10px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
.login-box button:hover {
    background-color: #0056b3;
}

/* --- Komunikaty --- */
.blad {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}
.sukces {
    color: rgb(221, 146, 6);
    font-weight: bold;
}

/* --- Select --- */
select {
    padding: 8px;
    width: 100%;
    margin-bottom: 10px;
}

/* --- Responsywność tabel --- */
@media screen and (max-width: 768px) {
    .panel {
        margin: 10px;
        padding: 15px;
    }
    table, thead, tbody, th, td, tr {
        display: block;
    }
    table thead {
        display: none;
    }
    table tr {
        margin-bottom: 15px;
        border: 1px solid #ccc;
        padding: 10px;
        background: #fff;
        border-radius: 5px;
    }
    table td {
        position: relative;
        padding-left: 50%;
        word-break: break-word;
    }
    table td::before {
        content: attr(data-label);
        position: absolute;
        top: 8px;
        left: 10px;
        font-weight: bold;
        white-space: nowrap;
    }
}

/* --- Box1 --- */
.box1 {
    text-align: center;
    margin-top: 50px;
}

/* --- Globalny styl przycisków --- */
button {
    background-color: #dfa221;
    color: white;
    border: none;
    padding: 15px 15px;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}
button:hover { background-color: #a07416; }
button:active { background-color: #5d8cf0; }


/* =====================================================
   KARTA UCZNIA 2.0
   ===================================================== */

.karta-header{
    background:linear-gradient(135deg,#1976d2,#2196f3);
    color:#fff;
    border-radius:15px;
    padding:28px 35px;
    margin-bottom:25px;
}

.karta-header h2{
    margin:0;
    color:#fff;
    font-size:30px;
    border:none;
}

.karta-header p{
    margin:5px 0 0;
    opacity:.9;
}

.karta-box{

    background:#fff;

    border-radius:12px;

    margin-bottom:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    overflow:hidden;
    border:1px solid #e8edf2;

}

.karta-box h3{

    margin:0;

    background:#f5f7fa;

    padding:15px 20px;

    border-bottom:1px solid #ddd;

    color:#1565c0;

    font-size:18px;
    letter-spacing:.3px;

}

.karta-notatka{

    padding:20px;

    line-height:1.7;

    min-height:80px;

}

.karta-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

}

.karta-buttons button{

    min-width:180px;

}

@media(max-width:700px){

.karta-buttons{

    flex-direction:column;

}

.karta-buttons button{

    width:100%;

}

}

.karta-table{
    width:100%;
    border-collapse:collapse;
}

.karta-table td{
    padding:12px 18px;
    border-bottom:1px solid #ececec;
}

.karta-table td:first-child{
    width:260px;
    font-weight:bold;
    color:#555;
    background:#fafafa;
    white-space:nowrap;
}

.karta-table tr:last-child td{
    border-bottom:none;
}
/* =====================================================
   EDYCJA KARTY UCZNIA
   ===================================================== */

.karta-form{
    width:100%;
}

.karta-form table{
    width:100%;
    border-collapse:collapse;
}

.karta-form td{
    padding:12px 15px;
    vertical-align:middle;
}

.karta-form td:first-child{
    width:260px;
    font-weight:bold;
    color:#555;
    background:#fafafa;
    white-space:nowrap;
}

.karta-form input[type=text],
.karta-form input[type=password],
.karta-form select,
.karta-form textarea{

    width:100%;
    padding:10px 12px;

    border:1px solid #cfd8dc;

    border-radius:8px;

    font-size:15px;

    box-sizing:border-box;

}

.karta-form textarea{

    resize:vertical;
    min-height:120px;

}

.karta-form hr{

    margin:30px 0;

}

.karta-radio label{

    margin-right:20px;

}

.karta-save{

    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:15px;

}

/* =====================================================
   PANEL WYCHOWAWCY
   ===================================================== */

.panel-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 35px;

margin-bottom:30px;

border-radius:15px;

background:linear-gradient(135deg,#1976d2,#2196f3);

color:#fff;

}

.panel-header h1{

margin:0;

font-size:32px;

color:#fff;

}

.panel-sub{

margin-top:8px;

font-size:16px;

opacity:.9;

}


@media(max-width:800px){

.panel-header{

flex-direction:column;

gap:20px;

text-align:center;

}

}
/* -------- Wyloguj -------- */

.logout-btn{

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

    min-width:170px;

    padding:14px 22px;

    border-radius:10px;

    background:#d32f2f;

    color:#fff;

    font-weight:bold;

    text-decoration:none;

    transition:.25s;

    box-shadow:0 3px 10px rgba(0,0,0,.18);

}

.logout-btn:hover{

    background:#b71c1c;

    transform:translateY(-2px);

    text-decoration:none;

    color:#fff;

}

.logout-btn:active{

    transform:translateY(0);

}


/* -------- Responsywność -------- */

@media(max-width:850px){

.panel-header{

    flex-direction:column;

    text-align:center;

}

.logout-btn{

    width:100%;

}

}
/* =====================================================
   USTAWIENIA KLASY
   ===================================================== */

.settings-box{

    background:#fff;

    border-radius:15px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    border:1px solid #e6ebf1;

    overflow:hidden;

    margin-bottom:30px;

}

.settings-title{

    background:#f7f9fc;

    color:#1565c0;

    font-size:20px;

    font-weight:bold;

    padding:18px 25px;

    border-bottom:1px solid #e6ebf1;

}

.settings-body{

    padding:25px;

}

.settings-table{

    width:100%;

    border-collapse:collapse;

}

.settings-table td{

    padding:14px;

    border-bottom:1px solid #eceff3;

}

.settings-table tr:last-child td{

    border-bottom:none;

}

.settings-table td:first-child{

    width:280px;

    font-weight:bold;

    color:#555;

    background:#fafafa;

}

.settings-table input[type=text]{

    width:100%;

}

.settings-save{

    text-align:center;

    margin-top:25px;

}
/* =====================================================
   MODUŁY
   ===================================================== */

.modules-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-bottom:30px;

}

.module-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#fff;

    border:1px solid #e8edf2;

    border-radius:14px;

    padding:28px 20px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.25s;

    color:#333;

}

.module-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 20px rgba(0,0,0,.12);

    text-decoration:none;

}

.module-icon{

    font-size:42px;

    margin-bottom:15px;

}

.module-title{

    font-size:18px;

    font-weight:bold;

    margin-bottom:8px;

}

.module-desc{

    font-size:14px;

    color:#666;

    text-align:center;

}
/* =====================================================
   DODAWANIE UCZNIA
   ===================================================== */

.student-box{

    background:#fff;

    border:1px solid #e8edf2;

    border-radius:15px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    overflow:hidden;

    margin-bottom:30px;

}

.student-title{

    background:#f7f9fc;

    color:#1565c0;

    font-size:20px;

    font-weight:bold;

    padding:18px 25px;

    border-bottom:1px solid #e8edf2;

}

.student-body{

    padding:25px;

}

.student-table{

    width:100%;

    border-collapse:collapse;

}

.student-table td{

    padding:14px;

    border-bottom:1px solid #edf1f5;

}

.student-table tr:last-child td{

    border-bottom:none;

}

.student-table td:first-child{

    width:240px;

    background:#fafafa;

    font-weight:bold;

    color:#555;

}

.student-save{

    text-align:center;

    margin-top:25px;

}
/* =====================================================
   LISTA UCZNIÓW
   ===================================================== */

.student-name{

font-size:18px;

font-weight:bold;

color:#222;

}

.student-id{

margin-top:5px;

font-size:12px;

color:#999;

}

.student-books{

display:inline-block;

padding:5px 12px;

background:#1976d2;

color:#fff;

border-radius:30px;

font-weight:bold;

min-width:45px;

text-align:center;

}

.student-actions{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

flex-wrap:nowrap;

}

.action-btn{

display:flex;

align-items:center;

justify-content:center;

width:42px;

height:42px;

padding:0;

border:none;

border-radius:10px;

font-size:20px;

line-height:1;

cursor:pointer;

text-decoration:none;

color:#fff;

transition:.2s;

box-sizing:border-box;

}

.action-view{

background:#1976d2;

}

.action-book{

background:#2e7d32;

}

.action-delete{

background:#c62828;

}

.action-btn:hover{

transform:translateY(-2px);

opacity:.9;

text-decoration:none;

color:#fff;

}
.student-actions .action-btn{

margin:0 !important;

padding:0 !important;

width:42px;

height:42px;

font-size:20px;

min-width:42px;

}
.action-form{

margin:0;

padding:0;

display:flex;

}
.student-actions button.action-btn{

width:42px;

height:42px;

padding:0;

margin:0;

min-width:42px;

border-radius:10px;

font-size:20px;

line-height:1;

}