/* --- ALAP STÍLUSOK --- */
* {
    /* EZ AZ ÚJ SZABÁLY MEGOLDJA A GÖRGETÉSI PROBLÉMÁT */
    box-sizing: border-box; 
}

body {
    font-family: Arial, sans-serif;
    color: #fff !important;
    background: #486459 !important;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    overflow-y: scroll; 

}

/* EZ A SZABÁLY MEGOLDJA A VÁLASZTÓVONALAK PROBLÉMÁJÁT */
hr {
    border: none;
    height: 1px;
    background-color: #ccc; /* Vékony szürke vonal */
    margin: 15px 0;
}

/* Általános link stílusok */
a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    text-decoration: underline;
    color: #03448a;
}

h1, h2 {
    color: #fff !important;
}

/* --- ELRENDEZÉS --- */
main {
    flex-grow: 1; /* A fő tartalom kitölti a rendelkezésre álló helyet */
    display: flex;
    justify-content: center; /* Vízszintes középre igazítás */
    align-items: center;     /* Függőleges középre igazítás */
    padding: 20px 0;
}

.footer {
    margin-top: 20px;
    padding-top: 10px;
}

/* ... (A többi gomb és táblázat stílus változatlan) ... */
.action-button {
    display: inline-block;
    margin-bottom: 10px;
    background: #007BFF;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
}

.action-button:hover {
    text-decoration: none;
    color: #fff;
    background-color: #03448a;
}

/* STÍLUS A JOBB OLDALI GOMBNAK */
.right-button {
    float: right; /* Jobbra úsztatjuk */
    margin-left: 10px; /* Hagyjunk egy kis helyet, ha van mellette más */
}

/* STÍLUS A BAL OLDALI GOMBOKNAK (Vissza / Rendelések) */
.left-button {
    float: left; /* Balra úsztatjuk */
    margin-right: 10px; /* Hagyjunk egy kis helyet */
}

.center-button-container {
    text-align: center;
}

/* STÍLUS A CSÖKKENTÉS GOMBHOZ (action-button kinézet) */
.decrease-button {
    /* Az action-button stílusát másoljuk ide */
    background: #007BFF; /* Kék szín */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    border: none; /* Eltávolítjuk a form button által adott border-t */
    cursor: pointer;
    /* Felülírjuk a form button által adott margin-top: 5px-et */
    margin-top: 0; 
}

.decrease-button:hover {
    background-color: #03448a; /* Sötétebb kék hover szín */
    text-decoration: none;
}

.tile {
    display: inline-block;
    width: 250px;
    height: 140px;
    background: #416858;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    line-height: 140px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.tile:hover {
    background: #e9f5ff;
    text-decoration: none;
    color: #416858;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #416858 !important;
}

table, th, td {
    border: 1px solid #ccc;
}

th, td {
    padding: 10px;
    text-align: left;
}

form input, form button {
    padding: 6px;
    margin-right: 8px;
    margin-top: 5px;
}

form select{
    padding: 6px;
    margin-right: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

form button {
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background: #218838;
}

.footer {
    margin-top: 20px;
    padding-top: 10px;
}

.br-height-adjust {
        line-height: 2;
    }

body { font-family: Arial, sans-serif; background: #f4f4f4; padding: 20px; }
        .login-container { width: 300px; margin: 0 auto; padding: 20px; background: #416858; border: 1px solid #ccc; border-radius: 8px; margin-top: 50px; color: white; }
        .login-container p { text-align: center; margin-bottom: 10px; }
        .login-container label { display: block; text-align: left; margin-bottom: 5px; }
        .login-container input[type="text"],
        .login-container input[type="password"] { width: 100%; padding: 10px; box-sizing: border-box; }
        .login-container input[type="submit"],
        .login-container button,
        .login-container .forgot-password-btn { width: 100%; padding: 10px; margin-top: 10px; box-sizing: border-box; background: #007BFF; color: white; border: none; cursor: pointer; border-radius: 4px; }
        .login-container input[type="submit"]:hover,
        .login-container button:hover,
        .login-container .forgot-password-btn:hover { background: #03448a; }
        .error-message { color: red; text-align: center; margin-bottom: 10px; }

body { font-family: Arial, sans-serif; background: #f4f4f4; padding: 20px; }
        .container { width: 400px; margin: 0 auto; padding: 20px; background: #416858; border: 1px solid #ccc; border-radius: 8px; margin-top: 50px; color: white; }
        .container input[type="text"], .container input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; }
        .container button, .container input[type="submit"] { width: 100%; padding: 10px; margin-top: 10px; background: #007BFF; color: white; border: none; cursor: pointer; border-radius: 4px; }
        .container button:hover, .container input[type="submit"]:hover { background: #03448a; }
        .message-success { color: green; background-color: #d4edda; border-color: #c3e6cb; padding: 10px; border-radius: 4px; color: black; }
        .message-error { color: red; background-color: #f8d7da; border-color: #f5c6cb; padding: 10px; border-radius: 4px; color: black; }
        
body { font-family: Arial, sans-serif; background: #f4f4f4; padding: 20px; }
        .register-container { width: 400px; margin: 0 auto; padding: 20px; background: #416858; border: 1px solid #ccc; border-radius: 8px; margin-top: 50px; color: white; }
        .register-container input, .register-container select { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; }
        .register-container input[type="radio"] { width: auto; margin-right: 10px; } 
        /* Stílus minden gombnak, beleértve a Vissza gombot is */
        .register-container input[type="submit"],
        .register-container button { 
            background: #007BFF; 
            color: white; 
            border: none; 
            cursor: pointer; 
            border-radius: 4px;
            width: 100%; 
            padding: 10px; 
            margin-top: 10px; 
            box-sizing: border-box;
        }
        .register-container input[type="submit"]:hover,
        .register-container button:hover { background: #03448a; }
        .hidden-form { display: none; }
        .radio-group { margin-bottom: 10px; }

/* --- MOBIL OPTIMALIZÁLÁS (FINOMÍTOTT CSEMPÉK) --- */
@media (max-width: 768px) {

    /* 1. GOMBOK MÉRETE (KOMPAKT) */
    button, input[type="submit"], .action-button, .left-button, .right-button {
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        height: auto !important;
        margin: 5px 0 !important;
    }

    .left-button, a[href*="index"], a[href*="menu"] { float: left !important; }
    .right-button, a[href*="logout"], button[name="logout"] { float: right !important; }
    form button[type="submit"], form input[type="submit"] { float: left !important; clear: both; }

    /* 2. NAGY ŰRLAPOK MEZŐI (EGYMÁS ALATT) */
    .container input[type="text"], 
    .container input[type="email"], 
    .container input[type="tel"],
    .container select,
    .register-container input,
    form > input, 
    form > select {
        width: 100% !important;
        display: block !important;
        float: none !important;
        height: 40px !important;
        margin-bottom: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. TÁBLÁZAT MEZŐI (KICSIK) */
    td input[type="number"], td input {
        width: 60px !important;
        height: 30px !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    /* 4. TILE (FŐMENÜ) - ARÁNYOS NÖVELÉS ÉS HELYKIHASZNÁLÁS */
    main { 
        flex-direction: column; 
        align-items: center; 
        padding: 5px 0 !important; /* Kevesebb hely a főoldalon */
    }
    
    .tile {
        line-height: normal !important;
        width: 90% !important;
        
        /* Arányosan növelt magasság a téglalap formához */
        min-height: 90px !important; 
        height: auto !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Minimális térköz felette és alatta */
        margin: 4px auto !important; 
        
        border-radius: 12px !important;
        font-size: 19px !important;
        padding: 10px !important;
    }

    /* 5. TÁBLÁZAT (EXCEL MÓD) */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        clear: both;
        margin-top: 20px;
    }
    th, td {
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 14px;
    }
    /* --- KIVÉTEL: BELÉPŐ OLDAL GOMBJAI (TELJES SZÉLESSÉG) --- */
    /* Ez biztosítja, hogy a Belépés, Regisztráció és Elfelejtett jelszó 
       gombok egymás alatt legyenek és kitöltsék a teret, 
       de NE rontsa el a belső oldalak kis gombjait. */
    
    .login-container input[type="submit"], 
    .login-container button {
        width: 100% !important;       /* Teljes szélesség */
        display: block !important;    /* Mindenképp új sorba kerüljön */
        float: none !important;       /* Ne ússzon balra/jobbra */
        margin-top: 10px !important;  /* Térköz a gombok között */
        padding: 12px !important;     /* Kényelmes, nagy gomb */
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* A belépő oldalon a szövegdobozoknak is kell egy kis igazítás, 
       hogy pont ugyanakkorák legyenek, mint a gombok */
    .login-container input[type="text"], 
    .login-container input[type="password"] {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}