body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: url('/images/predil_.jpg') no-repeat center center fixed;
    background-size: cover;
}

.header {
    width: 100%;
    background: rgba(20, 20, 20, 0.7);
    color: #fff;
    padding: 8px 0;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.container {
    display: flex;
    margin-top: 54px;
    height: calc(100vh - 54px);
}

.sidebar {
    width: 28vw;
    min-width: 180px;
    max-width: 320px;
    background: rgba(40, 40, 40, 0.7);
    color: #fff;
    padding: 32px 12px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.13);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar h2 {
    margin-top: 0;
    font-size: 1.15em;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* MODRÁ tlačítka – užší na výšku */
.nav-btn {
    display: block;
    width: 85%;
    min-width: 120px;
    max-width: 210px;
    margin: 0 auto 8px auto;
    background: linear-gradient(90deg, #2c67f2 0%, #3bc7f2 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 0; /* užší na výšku */
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(80,120,180,0.09);
    transition: background 0.2s, transform 0.11s, box-shadow 0.15s;
    cursor: pointer;
    line-height: 1.1;
    height: 36px; /* pevná výška tlačítka */
}



.nav-btn:hover, .nav-btn:focus {
    background: linear-gradient(90deg, #3bc7f2 0%, #2c67f2 100%);
    transform: scale(1.035);
    box-shadow: 0 4px 16px rgba(44,103,242,0.12);
}

/* Upravená šedá varianta tlačítka – o něco vyšší a text vycentrovaný */
.nav-btn--gray {
    /* vzhled */
    background: linear-gradient(90deg, #7a7a7a 0%, #bdbdbd 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    border: none;

    /* velikost a vnitřní odsazení */
    height: 38px;           /* zvětšená pevná výška tlačítka */
    min-height: 38px;       /* zajistí minimální výšku, když se přepíše */
    padding: 0 16px;        /* svislé padding = 0 (výška řízena height), vodorovné padding přidá prostor kolem textu */

    /* zarovnání textu uprostřed – flexibilní a robustní řešení */
    display: flex;          /* přepíše display z .nav-btn, ale šířka zděděná z .nav-btn zůstane */
    align-items: center;    /* vertikální centrování textu */
    justify-content: center;/* horizontální centrování obsahu */

    /* text a font */
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: normal;    /* necháme normální, protože vert. centrování řeší flexbox */

    /* okraje a přechody */
    border-radius: 20px;
    transition: background 0.2s, transform 0.11s, box-shadow 0.15s;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

/* hover / focus efekt – stejný scale efekt jako u modrého tlačítka */
.nav-btn--gray:hover,
.nav-btn--gray:focus {
    background: linear-gradient(90deg, #bdbdbd 0%, #7a7a7a 100%);
    transform: scale(1.065); /* 1.035*/
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    outline: none;
}

/* drobná responzivní úprava: na malých obrazovkách použij širší tlačítko */
@media (max-width: 700px) {
    .nav-btn--gray {
        height: 44px;
        width: 100%;     /* .nav-btn sice má width:85% ale na mobilech je dobré mít 100% */
        max-width: none;
        min-width: 0;
    }
}

.main-panel {
   
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transparent-box {
    background: rgba(255,255,255,0.82);
    border-radius: 20px;
    padding: 38px 24px;
    max-width: 600px;
    min-width: 240px;
    box-shadow: 0 4px 32px rgba(120,120,120,0.19);
    text-align: center;
    margin: 0 8vw;
}

input[type="text"], input[type="password"] {
    width: 78%;
    font-size: 1em;
    margin: 6px 0 14px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #bbb;
    background: rgba(255,255,255,0.8);
    transition: border .2s;
}

input[type="text"]:focus, input[type="password"]:focus {
    border: 1.5px solid #2c67f2;
    outline: none;
}

.login-btn {
    background: linear-gradient(90deg, #2c67f2 0%, #3bc7f2 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 32px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    margin-top: 10px;
}

.login-btn:hover {
    background: linear-gradient(90deg, #3bc7f2 0%, #2c67f2 100%);
}