/* === GLOBAL === */
body {
    font-family: 'Poppins', sans-serif;
    background: url('bg.jpg') no-repeat fixed;
    background-size: cover;
    color: #aed5ff;
    margin: 0;
    padding: 0;
}

/* === LAYOUT WRAPPER === */
.container {
    display: flex;
    min-height: 100vh;
}

/* === SIDEBAR === */
.sidebar {
    width: 200px;
    background: url('mbg.png') center/cover no-repeat;
    padding: 20px;
    box-shadow: 4px 0 10px rgba(0,0,0,0.5);
}
.sidebar h2 {
    color:#abfdfd; text-shadow:0 0 5px rgba(36,43,173,0.8);
    font-size:15px; margin-bottom:10px;
}
.sidebar ul,.sidebar ul li {
    list-style:none; padding:0; margin:0;
}
.sidebar ul li { margin:8px 0; }
.toggle {
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; padding:10px; border-radius:5px; color:#aed1ff;
}
.toggle:hover { background:#1241b1; color:#121212; }
.arrow { transition:transform .3s; }
.submenu {
    max-height:0; overflow:hidden; transition:max-height .3s ease-out;
}
.submenu a {
    display:block; margin:5px 0; padding:8px;
    background:#0f0f0f; border-radius:5px; font-size:.9em;
    color:#aed5ff; text-decoration:none;
}
.submenu a:hover { background:#1241b1; color:#121212; }
a { color:#5186b7; text-decoration:none; }
a:hover { color:#5fa5f7; }

/* === MAIN CONTENT === */
.content {
    flex:1; padding:350px 20px 20px;
    display:flex; flex-wrap:wrap; gap:20px;
    justify-content:center; align-items:center;
    position:relative; z-index:1;
}
.content::before {
    content:""; position:absolute; inset:0;
    background:rgba(0,0,0,0.2); z-index:0;
}
.content>* { position:relative; z-index:1; }

/* === CARD STYLES === */
.card {
    background:#041123; padding:20px; border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
    width:350px; max-width:800px; text-align:center;
    opacity:0; transform:translateY(20px);
    transition:all .5s ease-in-out;
}
.card.show {
    opacity:1; transform:translateY(0);
    width:100%; max-width:800px;
}

/* === TABLES: Opcja 2C === */
.table-container {
    width:100%; max-width:600px; margin:20px auto;
    background:rgba(30,30,46,0.9); padding:15px;
    border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.3);
    overflow-x:auto;
}
table {
    width:100%; border-collapse:collapse; color:#92b8ff;
}
th, td {
    padding:12px 16px; font-size:13px; vertical-align:middle;
}
th {
    background:#7a89ae; color:#121212; text-align:left;
    border-left:5px solid;
    border-image: linear-gradient(180deg, #5fa5f7, #aed5ff) 1;
}
td {
    background:#021733;
    border-left:5px solid rgba(137, 162, 255, 0.1);
    border-bottom:1px solid rgba(137, 162, 255, 0.1);

}
tr:hover td {
    background:rgba(255,255,255,0.12);
}

/* === DROP BUTTON & CONTENT === */
.drop-btn {
    margin-left:.5rem; padding:.25rem .5rem; font-size:.9rem;
    background:#043e84; color:#fff; border:none; border-radius:4px; cursor:pointer;
}
.drop-btn:hover { background:#0351a2; }
.drop-content {
    display:none; margin-top:.5rem; padding:.5rem;
    background:#f9f9f9; border:1px solid #ccc; border-radius:4px;
    text-align:left; font-size:.9rem; line-height:1.4;
}

/* === ITEM-HOVER-BOX STYLES === */
.item-hover-container { position:relative; display:inline-block; cursor:pointer; }
.item-hover-box {
    position:absolute; top:100%; left:90%; transform:translateX(-50%);
    opacity:0; transition:opacity .3s,transform .3s;
    background:#1a1a1a; color:#9ee1ff; padding:24px 18px;
    border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.6);
    z-index:999; min-width:450px; max-height:80vh; overflow-y:auto;
    font-size:12px; pointer-events:none; box-sizing:border-box;
}
.item-hover-container:hover .item-hover-box {
    opacity:1; transform:translateX(-50%) translateY(8px);
    pointer-events:auto;
}
.item-hover-box ul { margin:0; padding-left:1.2em; }
.item-hover-box li {
    list-style:none; margin-bottom:6px; display:flex; align-items:center; font-size:13px;
}
.item-hover-box li img {
    width:40px!important; height:40px!important; margin-right:8px; flex-shrink:0;
}