/*
#############################################################
Index page
#############################################################
*/
        body.index-page {
            background: #0d0d0d;
            color: white;
            font-family: Arial, sans-serif;
        }

        body.index-page .container {
            width: 80%;
            margin: 40px auto;
            background: #111;
            padding: 40px;
            border-radius: 14px;
            box-shadow: 0 0 25px rgba(255,215,0,0.25);
        }

        /* Logó */
        body.index-page .logo {
            width: 220px;
            display: block;
            margin: 0 auto 25px auto;
        }

        /* Menü */
        body.index-page .menu {
            margin: 20px auto 40px auto;
            width: 60%;
        }

        body.index-page .menu a {
            display: block;
            padding: 12px 16px;
            margin: 8px 0;
            background: #222;
            color: #d4af37;
            text-decoration: none;
            border-radius: 6px;
            font-size: 16px;
            text-align: center;
        }

        body.index-page .menu a:hover {
            background: #333;
        }

        /* Hero szekció */
        body.index-page .hero {
            text-align: center;
            margin-top: 20px;
        }

        body.index-page .hero h1 {
            color: #d4af37;
            font-size: 32px;
            margin-bottom: 10px;
        }

        body.index-page .hero p {
            font-size: 18px;
            color: #ccc;
        }

/*
#############################################################
Login page
#############################################################
*/
        body.login-page {
            margin: 0;
            padding: 0;
            background: #0d0d0d;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
        }

        body.login-page .login-container {
            background: #111;
            padding: 40px;
            width: 350px;
            border-radius: 15px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
            text-align: center;
        }

        body.login-page h2 {
            color: #d4af37;
            margin-bottom: 10px;
        }

        body.login-page .input-field {
            width: 100%;
            margin: 15px 0;
        }

        body.login-page .input-field input {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #444;
            background: #1a1a1a;
            color: white;
            font-size: 14px;
        }

        body.login-page .login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(90deg, #d4af37, #b8860b);
            border: none;
            border-radius: 8px;
            color: black;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }

        body.login-page .login-btn:hover {
            opacity: 0.9;
        }

        body.login-page a {
            color: #d4af37;
            text-decoration: none;
        }

        body.login-page a:hover {
            text-decoration: underline;
        }

        body.login-page .info-text {
            color: #ccc;
            font-size: 13px;
            margin-top: -5px;
        }

/*
#############################################################
Active Sessions page
#############################################################
*/
body.active-sessions-page {
    background: #111;
    color: #eee;
    font-family: Arial, sans-serif;
}

body.active-sessions-page .container {
    width: 90%;
    margin: 40px auto;
}

body.active-sessions-page h1 {
    color: gold;
    margin-bottom: 20px;
}

body.active-sessions-page table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
}

body.active-sessions-page th,
body.active-sessions-page td {
    padding: 12px;
    border-bottom: 1px solid #333;
    vertical-align: middle;
    font-size: 16px;
}

body.active-sessions-page th {
    background: #222;
    color: gold;
    text-align: left;
}

body.active-sessions-page tr:hover {
    background: #222;
}

/* Alap gomb stílus – sorokban és vissza gombnál */
body.active-sessions-page .btn {
    display: inline-block;
    padding: 6px 12px;
    background: #c89b3c;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
}

body.active-sessions-page .btn:hover {
    background: gold;
}

/* Piros gomb általánosan (sorokban is) */
body.active-sessions-page .danger {
    background: #b33;
    color: #fff;
}

body.active-sessions-page .danger:hover {
    background: #e44;
}

/* Felső gombsor */
body.active-sessions-page .top-buttons {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Jobb oldali gombcsoport – csak a felső két gomb */
.top-right-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 220px;
}

/* Felső gombok legyenek szélesebbek, de a vissza gomb marad kompakt */
.top-right-buttons .btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
}

/* Felső piros gomb betűmérete kisebb, hogy ne törjön */
.top-right-buttons .btn.danger {
    font-size: 13px;
}

/* Szürke gomb (Kiléptetés kivéve ezt) */
body.active-sessions-page .btn.except {
    background: #444;
    color: #eee;
}

body.active-sessions-page .btn.except:hover {
    background: #666;
}

/* Sorokban lévő gombok közötti távolság */
body.active-sessions-page td form {
    margin-bottom: 6px; /* Kiléptetés és Részletek között pár pixel */
}

/* Ikonok finomhangolása */
body.active-sessions-page .session-row td {
    font-size: 17px;
}

body.active-sessions-page .session-row td .icon {
    margin-right: 6px;
    font-size: 18px;
}

/* Szűrősáv */
.filter-bar {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
    padding: 8px;
    background: #222;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 14px;
}

.filter-bar input::placeholder {
    color: #aaa;
}


/*
#############################################################
Modal ablak (Session részletek)
#############################################################
*/

.modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background: #1a1a1a;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #444;
    width: 50%;
    color: #eee;
    border-radius: 8px;
}

.modal-content h2 {
    color: gold;
    margin-bottom: 15px;
}

.modal-content p {
    margin: 8px 0;
    font-size: 15px;
}

.close {
    color: #ccc;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #fff;
}

/* Modal biztonsági jelzés */
.modal-content p {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-content p strong {
    min-width: 140px;
}


.modal-content .risk-box {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
}



/*
#############################################################
Add Client page
#############################################################
*/
body.add-client-page {
    background:#0d0d0d;
    color:white;
    font-family:Arial,sans-serif;
}

body.add-client-page .container {
    width:70%;
    margin:40px auto;
    background:#111;
    padding:25px;
    border-radius:12px;
    box-shadow:0 0 20px rgba(255,215,0,0.2);
}

body.add-client-page h2 {
    color:#d4af37;
    text-align:center;
    margin-bottom:20px;
}

body.add-client-page label {
    display:block;
    margin-top:12px;
    color:#d4af37;
    font-weight:bold;
}

body.add-client-page input,
body.add-client-page textarea,
body.add-client-page select {
    width:100%;
    padding:8px;
    margin-top:4px;
    border-radius:6px;
    border:none;
    background:#222;
    color:white;
}

body.add-client-page button {
    margin-top:20px;
    width:100%;
    padding:10px;
    background:#d4af37;
    color:black;
    font-weight:bold;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

body.add-client-page button:hover {
    background:#b8962e;
}

body.add-client-page a.back {
    display:block;
    text-align:center;
    margin-top:15px;
    color:#d4af37;
    text-decoration:none;
}

body.add-client-page a.back:hover {
    text-decoration:underline;
}



/*
#############################################################
Add IP Ban page
#############################################################
*/
body.add-ip-ban-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.add-ip-ban-page .container {
    width: 60%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.add-ip-ban-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.add-ip-ban-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.add-ip-ban-page input,
body.add-ip-ban-page textarea,
body.add-ip-ban-page select {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.add-ip-ban-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.add-ip-ban-page button:hover {
    background: #b8962e;
}

body.add-ip-ban-page a.back {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #d4af37;
    text-decoration: none;
}

body.add-ip-ban-page a.back:hover {
    text-decoration: underline;
}


/*
#############################################################
Add User page
#############################################################
*/
body.add-user-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.add-user-page .container {
    width: 60%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.add-user-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.add-user-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.add-user-page input,
body.add-user-page select {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.add-user-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.add-user-page button:hover {
    background: #b8962e;
}

body.add-user-page a.back {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #d4af37;
    text-decoration: none;
}

body.add-user-page a.back:hover {
    text-decoration: underline;
}

body.add-user-page .adduser-hidden {
    display: none;
}


/*
#############################################################
Admin Dashboard page
#############################################################
*/
body.admin-dashboard-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.admin-dashboard-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.admin-dashboard-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 30px;
}

/* Kártyák */
body.admin-dashboard-page .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

body.admin-dashboard-page .card {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255,215,0,0.1);
}

body.admin-dashboard-page .card h3 {
    color: #d4af37;
    margin-bottom: 10px;
}

body.admin-dashboard-page .card p {
    font-size: 24px;
    margin: 0;
}

/* Grafikon szekció */
body.admin-dashboard-page .charts {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

body.admin-dashboard-page .chart-box {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    width: 32%;
    box-shadow: 0 0 10px rgba(255,215,0,0.1);
}

body.admin-dashboard-page .chart-box h3 {
    color: #d4af37;
    margin-bottom: 15px;
    text-align: center;
}

/* ================================
   JAVÍTOTT CANVAS MÉRETEK
   ================================ */

/* Admin vs User pie chart — tökéletes kör */
#adminUserChart {
    width: 300px !important;
    height: 300px !important;
    background: #222;
    border-radius: 10px;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

/* Regisztrációk bar chart */
#regChart {
    width: 100% !important;
    height: 280px !important;
    background: #222;
    border-radius: 10px;
    padding: 10px;
    display: block;
}

/* Ügyfelenkénti pie chart — tökéletes kör */
#clientChart {
    width: 300px !important;
    height: 300px !important;
    background: #222;
    border-radius: 10px;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

/* Utolsó felhasználók */
body.admin-dashboard-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}

body.admin-dashboard-page th {
    background: #222;
    color: #d4af37;
    padding: 10px;
    text-align: left;
}

body.admin-dashboard-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
}

body.admin-dashboard-page tr:hover {
    background: #1a1a1a;
}

body.admin-dashboard-page a {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #d4af37;
    text-decoration: none;
}

body.admin-dashboard-page a:hover {
    text-decoration: underline;
}

/* Mobilbarát */
@media (max-width: 900px) {
    body.admin-dashboard-page .cards {
        grid-template-columns: 1fr;
    }
    body.admin-dashboard-page .charts {
        flex-direction: column;
        align-items: center;
    }
    body.admin-dashboard-page .chart-box {
        width: 100%;
    }

    /* Pie chart mobilon is kör marad */
    #adminUserChart,
    #clientChart {
        width: 260px !important;
        height: 260px !important;
    }
}




/*
#############################################################
Admin Log page
#############################################################
*/
body.admin-log-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.admin-log-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.admin-log-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

/* Szűrő űrlap */
body.admin-log-page form {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

body.admin-log-page label {
    color: #d4af37;
    font-size: 14px;
}

body.admin-log-page input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.admin-log-page button {
    grid-column: span 5;
    padding: 12px;
    background: #d4af37;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

body.admin-log-page button:hover {
    background: #b8962e;
}

/* Táblázat */
body.admin-log-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

body.admin-log-page th {
    background: #222;
    color: #d4af37;
    padding: 12px;
    text-align: left;
}

body.admin-log-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
}

body.admin-log-page tr:hover {
    background: #1a1a1a;
}

/* Vissza link */
body.admin-log-page a.adminlog-back {
    color: #d4af37;
    display: block;
    text-align: center;
    margin-top: 25px;
    text-decoration: none;
    font-size: 16px;
}

body.admin-log-page a.adminlog-back:hover {
    text-decoration: underline;
}

/*
#############################################################
Lapozó gombok
#############################################################
*/
.pagination {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.pagination .btn {
    background: #222;
    color: #d4af37;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #d4af37;
    transition: 0.25s ease;
}

.pagination .btn:hover {
    background: #d4af37;
    color: #111;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

.pagination span {
    color: #d4af37;
    font-size: 16px;
    font-weight: bold;
}

/* Mobilbarát */
@media (max-width: 600px) {
    .pagination {
        flex-direction: column;
        gap: 10px;
    }

    .pagination .btn {
        width: 100%;
        text-align: center;
    }
}

/* Export CSV gomb */
.adminlog-export {
    text-align: right;
    margin-bottom: 20px;
}

.adminlog-export-btn {
    background: #222;
    color: #d4af37;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #d4af37;
    transition: 0.25s ease;
    display: inline-block;
}

.adminlog-export-btn:hover {
    background: #d4af37;
    color: #111;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.6);
}



/*
#############################################################
API Keys page
#############################################################
*/
body.api-keys-page {
    background: #0d0d0d;
    color: #eee;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

body.api-keys-page .container {
    width: 95%;
    max-width: 900px;
    margin: 40px auto;
    background: #111;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #333;
}

body.api-keys-page h2 {
    color: gold;
    margin-bottom: 20px;
}

body.api-keys-page label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    color: #ccc;
}

body.api-keys-page input[type="text"],
body.api-keys-page select {
    width: 100%;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 6px;
    color: #eee;
}

body.api-keys-page .checkbox-group {
    margin: 10px 0;
    padding: 10px;
    background: #1a1a1a;
    border-radius: 6px;
    border: 1px solid #333;
}

body.api-keys-page .checkbox-group label {
    display: block;
    margin: 6px 0;
    cursor: pointer;
}

body.api-keys-page .btn {
    display: inline-block;
    padding: 10px 16px;
    background: gold;
    color: #000;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 15px;
}

body.api-keys-page .btn:hover {
    background: #e6c200;
}

body.api-keys-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    table-layout: fixed;
}

body.api-keys-page th,
body.api-keys-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
    text-align: left;
    vertical-align: top;
}

body.api-keys-page th {
    color: gold;
}

body.api-keys-page .api-key-cell {
    max-width: 180px;
    word-break: break-all;
    white-space: normal;
}

body.api-keys-page .status-active {
    color: #0f0;
    font-weight: bold;
}

body.api-keys-page .status-inactive {
    color: #f00;
    font-weight: bold;
}

body.api-keys-page .actions a {
    margin-right: 10px;
    color: gold;
    text-decoration: none;
}

body.api-keys-page .actions a:hover {
    text-decoration: underline;
}

body.api-keys-page .back-link {
    display: inline-block;
    margin-top: 20px;
    color: #9cf;
    text-decoration: none;
}

body.api-keys-page .back-link:hover {
    text-decoration: underline;
}


/*
#############################################################
API Log page
#############################################################
*/
body.api-log-page {
    background: #111;
    color: #eee;
    font-family: Arial, sans-serif;
}

body.api-log-page .container {
    width: 90%;
    margin: 40px auto;
}

body.api-log-page h1 {
    color: gold;
    margin-bottom: 20px;
}

body.api-log-page table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
    margin-top: 20px;
}

body.api-log-page th,
body.api-log-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
}

body.api-log-page th {
    background: #222;
    color: gold;
    text-align: left;
}

body.api-log-page tr:hover {
    background: #222;
}

body.api-log-page .btn {
    padding: 6px 12px;
    background: gold;
    color: black;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

body.api-log-page .btn:hover {
    background: #ffe066;
}

body.api-log-page .filter-box {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

body.api-log-page label {
    color: gold;
    margin-right: 10px;
}

body.api-log-page input[type="text"],
body.api-log-page input[type="date"] {
    padding: 6px;
    background: #222;
    border: 1px solid #444;
    color: #eee;
    border-radius: 4px;
    margin-right: 10px;
}

body.api-log-page a {
    color: #d4af37;
    display: block;
    text-align: center;
    margin-top: 25px;
    text-decoration: none;
}

body.api-log-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
Bruteforce Settings page
#############################################################
*/
body.bruteforce-settings-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.bruteforce-settings-page .container {
    width: 60%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.bruteforce-settings-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.bruteforce-settings-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.bruteforce-settings-page input {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.bruteforce-settings-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.bruteforce-settings-page button:hover {
    background: #b8962e;
}

body.bruteforce-settings-page a.back {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #d4af37;
    text-decoration: none;
}

body.bruteforce-settings-page a.back:hover {
    text-decoration: underline;
}


/*
#############################################################
Clients page
#############################################################
*/
body.clients-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.clients-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.clients-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 20px;
}

body.clients-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

body.clients-page th,
body.clients-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
    text-align: left;
}

body.clients-page th {
    color: #d4af37;
    background: #1a1a1a;
}

body.clients-page tr:hover {
    background: #1f1f1f;
}

body.clients-page a.btn {
    display: inline-block;
    padding: 8px 12px;
    margin: 4px 2px;
    background: #222;
    color: #d4af37;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
}

body.clients-page a.btn:hover {
    background: #333;
}

body.clients-page .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

body.clients-page .back {
    color: #d4af37;
    text-decoration: none;
}

body.clients-page .back:hover {
    text-decoration: underline;
}


/*
#############################################################
Edit Client page
#############################################################
*/
body.edit-client-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.edit-client-page .container {
    width: 70%;
    margin: 40px auto;
    background: #111;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.edit-client-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 20px;
}

body.edit-client-page label {
    display: block;
    margin-top: 12px;
    color: #d4af37;
    font-weight: bold;
}

body.edit-client-page input,
body.edit-client-page textarea,
body.edit-client-page select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.edit-client-page button {
    margin-top: 20px;
    width: 100%;
    padding: 10px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.edit-client-page button:hover {
    background: #b8962e;
}

body.edit-client-page a.back {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #d4af37;
    text-decoration: none;
}

body.edit-client-page a.back:hover {
    text-decoration: underline;
}


/*
#############################################################
Edit User page
#############################################################
*/

body.edit-user-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

/* Container */
body.edit-user-page .container {
    width: 60%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

/* Title */
body.edit-user-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

/* Labels */
body.edit-user-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

/* Inputs, selects, textarea */
body.edit-user-page input,
body.edit-user-page select,
body.edit-user-page textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
    font-size: 15px;
}

/* Textarea */
body.edit-user-page textarea {
    height: 120px;
    resize: vertical;
}

/* Save button */
body.edit-user-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

body.edit-user-page button:hover {
    background: #b8962e;
}

/* Back link */
body.edit-user-page a.back {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #d4af37;
    text-decoration: none;
    font-size: 16px;
}

body.edit-user-page a.back:hover {
    text-decoration: underline;
}

/*
#############################################################
Dropdown usability fixes (CSP-safe)
#############################################################
*/

/* Ensure dropdown is clickable even if overlay exists */
body.edit-user-page select {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Visual feedback when JS adds .active-select */
body.edit-user-page select.active-select {
    outline: 2px solid #d4af37;
}

/*
#############################################################
Form layout improvements (optional)
#############################################################
*/

.edituser-container form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/*
#############################################################
Forgot page
#############################################################
*/
body.forgot-password-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body.forgot-password-page .box {
    background: #111;
    padding: 40px;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    text-align: center;
}

body.forgot-password-page h2 {
    color: #d4af37;
}

body.forgot-password-page input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: white;
}

body.forgot-password-page button {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    border: none;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

body.forgot-password-page button:hover {
    opacity: 0.9;
}

body.forgot-password-page .error {
    color: #ff4444;
    margin-top: 10px;
}

body.forgot-password-page a {
    color: #d4af37;
    text-decoration: none;
}

body.forgot-password-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
IP BAN List page
#############################################################
*/
body.ip-ban-list-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.ip-ban-list-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.ip-ban-list-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 30px;
}

body.ip-ban-list-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}

body.ip-ban-list-page th {
    background: #222;
    color: #d4af37;
    padding: 10px;
    text-align: left;
}

body.ip-ban-list-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
}

body.ip-ban-list-page tr:hover {
    background: #1a1a1a;
}

body.ip-ban-list-page .btn-unban {
    background: #d4af37;
    color: black;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

body.ip-ban-list-page .btn-unban:hover {
    background: #b8962e;
}

body.ip-ban-list-page a.back {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #d4af37;
    text-decoration: none;
}

body.ip-ban-list-page a.back:hover {
    text-decoration: underline;
}


/*
#############################################################
Log Settings page
#############################################################
*/
body.log-settings-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.log-settings-page .container {
    width: 50%;
    margin: 50px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

body.log-settings-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 30px;
}

body.log-settings-page .section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

body.log-settings-page .section h3 {
    color: #d4af37;
    margin-bottom: 15px;
    font-size: 20px;
}

body.log-settings-page label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    color: #d4af37;
    font-size: 15px;
}

body.log-settings-page select,
body.log-settings-page input[type="number"] {
    width: 100%;
    padding: 10px;
    background: #222;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
}

body.log-settings-page button {
    width: 100%;
    padding: 14px;
    background: #d4af37;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 25px;
}

body.log-settings-page button:hover {
    background: #e6c556;
}

body.log-settings-page a {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #d4af37;
    text-decoration: none;
    font-size: 16px;
}

body.log-settings-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
Maintenance page
#############################################################
*/
body.maintenance-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

body.maintenance-page .box {
    background: #111;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,215,0,0.25);
}

body.maintenance-page h1 {
    color: #d4af37;
}

body.maintenance-page p {
    color: #ccc;
}


/*
#############################################################
Maintenance Settings page
#############################################################
*/
body.maintenance-settings-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.maintenance-settings-page .container {
    width: 50%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.maintenance-settings-page h2 {
    color: #d4af37;
    text-align: center;
}

body.maintenance-settings-page button {
    background: #d4af37;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

body.maintenance-settings-page button:hover {
    background: #b8962e;
}

body.maintenance-settings-page label {
    font-size: 18px;
    color: #d4af37;
}

body.maintenance-settings-page a {
    color: #d4af37;
    text-decoration: none;
}

body.maintenance-settings-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
Password Expiry Settings page
#############################################################
*/
body.password-expiry-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.password-expiry-page .container {
    width: 50%;
    margin: 60px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,215,0,0.25);
}

body.password-expiry-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.password-expiry-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.password-expiry-page input {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.password-expiry-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.password-expiry-page button:hover {
    background: #b8962e;
}

body.password-expiry-page a {
    color: #d4af37;
    text-decoration: none;
}

body.password-expiry-page a:hover {
    text-decoration: underline;
}



/*
#############################################################
Password Policy page
#############################################################
*/
body.password-policy-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.password-policy-page .container {
    width: 50%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

body.password-policy-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.password-policy-page .section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

body.password-policy-page .section h3 {
    color: #d4af37;
    margin-bottom: 10px;
    font-size: 18px;
}

body.password-policy-page label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #d4af37;
    font-size: 15px;
}

body.password-policy-page input[type="number"] {
    width: 100%;
    padding: 10px;
    background: #222;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
}

body.password-policy-page .checkbox-row {
    margin-top: 8px;
}

body.password-policy-page .checkbox-row input {
    margin-right: 8px;
}

body.password-policy-page button {
    width: 100%;
    padding: 14px;
    background: #d4af37;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}

body.password-policy-page button:hover {
    background: #e6c556;
}

body.password-policy-page a {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #d4af37;
    text-decoration: none;
    font-size: 16px;
}

body.password-policy-page a:hover {
    text-decoration: underline;
}

body.password-policy-page .hint {
    font-size: 13px;
    color: #bbbbbb;
    margin-top: 5px;
}


/*
#############################################################
Profile page
#############################################################
*/
body.profile-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.profile-page .container {
    width: 70%;
    margin: 40px auto;
    background: #111;
    padding: 35px;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(255,215,0,0.25);
}

body.profile-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.profile-page .info-box {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    border-left: 4px solid #d4af37;
}

body.profile-page .info-box p {
    margin: 6px 0;
    font-size: 16px;
}

body.profile-page .section-title {
    color: #d4af37;
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

body.profile-page .menu {
    margin-left: 20px;
}

body.profile-page .menu a {
    display: block;
    padding: 10px 14px;
    margin: 6px 0;
    background: #222;
    color: #d4af37;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    width: 85%;
}

body.profile-page .menu a:hover {
    background: #333;
}

body.profile-page .logout {
    margin-top: 30px;
    text-align: center;
}

body.profile-page .logout a {
    color: #ff6666;
    text-decoration: none;
    font-weight: bold;
}

body.profile-page .logout a:hover {
    text-decoration: underline;
}



/*
#############################################################
Register page
#############################################################
*/
body.register-page {
    margin: 0;
    padding: 0;
    background: #0d0d0d;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
}

body.register-page .register-container {
    background: #111;
    padding: 40px;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    text-align: center;
}

body.register-page h2 {
    color: #d4af37;
    margin-bottom: 10px;
}

body.register-page .input-field {
    width: 100%;
    margin: 15px 0;
}

body.register-page .input-field input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: white;
    font-size: 14px;
}

body.register-page .register-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    border: none;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

body.register-page .register-btn:hover {
    opacity: 0.9;
}

body.register-page a {
    color: #d4af37;
    text-decoration: none;
}

body.register-page a:hover {
    text-decoration: underline;
}

body.register-page .info-text {
    color: #ccc;
    font-size: 13px;
    margin-top: -5px;
}



/*
#############################################################
Reset Expired Password page
#############################################################
*/
body.expired-password-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.expired-password-page .container {
    width: 50%;
    margin: 60px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,215,0,0.25);
}

body.expired-password-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.expired-password-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.expired-password-page input {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.expired-password-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.expired-password-page button:hover {
    background: #b8962e;
}

body.expired-password-page .warning {
    background: #331a00;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #ffcc66;
    border: 1px solid #d4af37;
    text-align: center;
}



/*
#############################################################
Reset Password
#############################################################
*/
body.new-password-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body.new-password-page .box {
    background: #111;
    padding: 40px;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    text-align: center;
}

body.new-password-page h2 {
    color: #d4af37;
}

body.new-password-page input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: white;
}

body.new-password-page button {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    border: none;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

body.new-password-page button:hover {
    opacity: 0.9;
}

body.new-password-page a {
    color: #d4af37;
    text-decoration: none;
}

body.new-password-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
Session Settings page
#############################################################
*/
body.session-settings-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.session-settings-page .container {
    width: 40%;
    margin: 60px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,215,0,0.25);
}

body.session-settings-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

body.session-settings-page label {
    display: block;
    margin-top: 15px;
    color: #d4af37;
    font-weight: bold;
}

body.session-settings-page input {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.session-settings-page button {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    background: #d4af37;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

body.session-settings-page button:hover {
    background: #b8962e;
}

body.session-settings-page a {
    color: #d4af37;
    text-decoration: none;
}

body.session-settings-page a:hover {
    text-decoration: underline;
}


/*
#############################################################
SMTP Config page
#############################################################
*/
body.smtp-config-page {
    background: #111;
    color: #eee;
    font-family: Arial, sans-serif;
}

body.smtp-config-page .container {
    width: 60%;
    margin: 40px auto;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #333;
}

body.smtp-config-page h1 {
    color: gold;
    margin-bottom: 20px;
}

body.smtp-config-page label {
    display: block;
    margin-top: 15px;
    color: gold;
    font-weight: bold;
}

body.smtp-config-page input[type="text"],
body.smtp-config-page input[type="password"],
body.smtp-config-page input[type="number"] {
    width: 100%;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    color: #eee;
    border-radius: 4px;
    margin-top: 5px;
}

body.smtp-config-page .btn {
    margin-top: 20px;
    padding: 10px 20px;
    background: gold;
    color: black;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

body.smtp-config-page .btn:hover {
    background: #ffe066;
}

body.smtp-config-page .back {
    margin-top: 30px;
    text-align: center;
}

body.smtp-config-page .back a {
    color: #ff6666;
    text-decoration: none;
    font-weight: bold;
}

body.smtp-config-page .back a:hover {
    text-decoration: underline;
}


/*
#############################################################
Success page
#############################################################
*/
body.registration-success-page {
    margin: 0;
    padding: 0;
    background: #0d0d0d;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
}

body.registration-success-page .success-container {
    background: #111;
    padding: 40px;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    text-align: center;
}

body.registration-success-page h2 {
    color: #d4af37;
    margin-bottom: 10px;
}

body.registration-success-page .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    border-radius: 8px;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

body.registration-success-page .btn:hover {
    opacity: 0.9;
}


/*
#############################################################
User Activity page – Admin Log dizájn alapján egységesítve
#############################################################
*/
body.user-activity-log-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.user-activity-log-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
    box-sizing: border-box;
}

body.user-activity-log-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 25px;
}

/*
#############################################################
Szűrő panel – spacing és alignment javítva
#############################################################
*/
body.user-activity-log-page .filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border-left: 4px solid #d4af37;
    box-sizing: border-box;
}

body.user-activity-log-page .filters div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* prevents overflow and right-shift */
}

body.user-activity-log-page .filters div label {
    color: #d4af37;
    font-size: 14px;
}

body.user-activity-log-page .filters div input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
    box-sizing: border-box;
}

body.user-activity-log-page .filters button {
    grid-column: span 5;
    padding: 14px;
    background: #d4af37;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s ease;
}

body.user-activity-log-page .filters button:hover {
    background: #b8962e;
}

/*
#############################################################
Táblázat – admin log stílusra igazítva
#############################################################
*/
body.user-activity-log-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

body.user-activity-log-page th {
    background: #222;
    color: #d4af37;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #333;
}

body.user-activity-log-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
    font-size: 14px;
}

body.user-activity-log-page tr:hover {
    background: #1a1a1a;
}

/*
#############################################################
Lapozás – admin log dizájn szerint
#############################################################
*/
.pagination {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.pagination .btn {
    background: #222;
    color: #d4af37;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #d4af37;
    transition: 0.25s ease;
}

.pagination .btn:hover {
    background: #d4af37;
    color: #111;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

.pagination span {
    color: #d4af37;
    font-size: 16px;
    font-weight: bold;
}

/*
#############################################################
Vissza gomb – admin log dizájn szerint
#############################################################
*/
body.user-activity-log-page .back {
    margin-top: 25px;
    text-align: center;
}

body.user-activity-log-page .back a {
    background: #222;
    color: #d4af37;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #d4af37;
    transition: 0.25s ease;
    display: inline-block;
}

body.user-activity-log-page .back a:hover {
    background: #d4af37;
    color: #111;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.6);
}




/*
#############################################################
Users page
#############################################################
*/
body.user-management-page {
    background: #0d0d0d;
    color: white;
    font-family: Arial, sans-serif;
}

body.user-management-page .container {
    width: 90%;
    margin: 40px auto;
    background: #111;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

body.user-management-page h2 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 20px;
}

body.user-management-page .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

body.user-management-page .left-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.user-management-page .btn {
    background: #222;
    color: #d4af37;
    padding: 10px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
}

body.user-management-page .btn:hover {
    background: #333;
}

body.user-management-page input[type="text"] {
    padding: 8px;
    width: 250px;
    border-radius: 6px;
    border: none;
    background: #222;
    color: white;
}

body.user-management-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

body.user-management-page th,
body.user-management-page td {
    padding: 10px;
    border-bottom: 1px solid #333;
    text-align: left;
}

body.user-management-page th {
    color: #d4af37;
    background: #1a1a1a;
}

body.user-management-page tr:hover {
    background: #1f1f1f;
}

body.user-management-page .desc {
    font-size: 12px;
    color: #ccc;
    max-width: 350px;
}

body.user-management-page .actions {
    white-space: nowrap;
    min-width: 180px;
}

body.user-management-page .actions a {
    display: inline-flex;
    margin-right: 8px;
}


/*
#############################################################
Verify Email page
#############################################################
*/
body.verify-email-page {
    background: #0d0d0d;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #eee;
}

body.verify-email-page .container {
    width: 100%;
    max-width: 420px;
    margin: 80px auto;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
    text-align: center;
}

body.verify-email-page h2 {
    color: gold;
    margin-bottom: 10px;
}

body.verify-email-page p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 20px;
}

body.verify-email-page input[type="text"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #222;
    color: #eee;
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

body.verify-email-page .btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: gold;
    color: #000;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 15px;
}

body.verify-email-page .btn:hover {
    background: #e6c200;
}

body.verify-email-page .link-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #222;
    color: #ccc;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 5px;
}

body.verify-email-page .link-btn:hover {
    background: #333;
}


/*
#############################################################
Popup page
#############################################################
*/
/* ============================
   POPUP – globális komponens
   ============================ */

.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    color: black;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    opacity: 0;
    animation: popupFadeInOut 4s forwards;
    z-index: 9999;
}

@keyframes popupFadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10px); }
}