/* --- OGÓLNE --- */
body { 
    background: #121212; 
    color: #eee; 
    font-family: 'Segoe UI', sans-serif; 
    margin: 0; 
    padding: 0; 
}

/* --- NAWIGACJA --- */
nav { 
    background: #1e1e1e; 
    padding: 15px 25px; 
    display: flex; 
    gap: 20px; 
    border-bottom: 3px solid #1db954; 
    align-items: center;
}

nav a { 
    color: #bbb; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 13px; 
}

nav a:hover { color: #1db954; }

/* --- KONTENER I KARTY --- */
.container { 
    display: flex; 
    gap: 20px; 
    padding: 20px; 
    flex-wrap: wrap; 
}

.card { 
    background: #1e1e1e; 
    padding: 20px; 
    border-radius: 10px; 
    border: 1px solid #333; 
    flex: 1;
    min-width: 300px;
}

h2, h3 { color: #1db954; margin-top: 0; text-transform: uppercase; }

/* --- FORMULARZE W RAMÓWCE --- */
input, select, textarea { 
    width: 100%; 
    padding: 10px; 
    margin: 10px 0; 
    background: #252525; 
    border: 1px solid #444; 
    color: white; 
    border-radius: 5px; 
    box-sizing: border-box;
}

button, .btn-login { 
    width: 100%; 
    background: #1db954; 
    color: #000; 
    border: none; 
    padding: 12px; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 5px; 
    text-transform: uppercase;
}

button:hover { background: #179443; }

/* --- TABELA RAMÓWKI --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
    color: #eee;
}

th { 
    text-align: left; 
    padding: 12px; 
    border-bottom: 2px solid #1db954; 
    color: #888;
    font-size: 12px;
}

td { 
    padding: 12px; 
    border-bottom: 1px solid #333; 
    font-size: 14px;
}

tr:hover { background: #252525; }

/* --- POZDROWIENIA --- */
.msg { 
    background: #252525; 
    padding: 15px; 
    margin-bottom: 10px; 
    border-radius: 8px; 
    border-left: 5px solid #1db954;
}

.fade-out { opacity: 0; transform: translateX(40px); transition: 0.4s; }

/* --- STATUSY --- */
.btn-del { 
    color: #ff4d4d; 
    text-decoration: none; 
    font-size: 11px; 
    border: 1px solid #ff4d4d; 
    padding: 4px 8px; 
    border-radius: 4px; 
    text-transform: uppercase;
}

.btn-del:hover { background: #ff4d4d; color: white; }

/* Gwarantuje, że padding nie powiększa szerokości karty */
* { box-sizing: border-box; }

.container {
    display: flex;
    flex-wrap: wrap; /* Pozwala na przejście do nowej linii na telefonach */
    gap: 30px;      /* Tworzy wyraźny odstęp między kolumnami */
    padding: 20px;
    align-items: flex-start;
}

.card {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #333;
    margin-bottom: 20px; /* Dodatkowy margines dolny */
}