/* ==========================================================
   Táblázat
   ========================================================== */
.table-container{background:#fff;border-radius:10px;padding:15px;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow-x:auto;}

	#machinesTable{width:100%;min-width:1700px;margin-bottom:0;table-layout:fixed;}
	#machinesTable th{background:#212529;color:#fff;text-align:center;vertical-align:middle;font-size:13px;font-weight:600;}
	#machinesTable td{padding:6px 8px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;}
	#machinesTable tbody tr:hover{background:#fff8dc;}
	#machinesTable td:first-child{text-align:center;font-weight:bold;color:#0d6efd;}
	#machinesTable td:last-child{text-align:center;}
	#machinesTable td:last-child .btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
	#machinesTable td:last-child .btn:first-child{margin-right:4px;}

    .table-responsive {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 570px; /* kb. 10 automata látszik, a többi belül görgethető */
    }

    .table thead th {
        position: sticky;
        top: 0;
        background: #0c2242; /* Bootstrap primary */
        color: white;
        z-index: 10;
    }


.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.page-title{font-size:28px;font-weight:700;color:#212529;margin:0;}
.page-subtitle{font-size:13px;color:#6c757d;margin-top:3px;}

/* ==========================================================
   Űrlapok
   ========================================================== */
.form-container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.alert{
    transition:opacity .5s ease;
}

.vm-header-logo {
    width: 85px;
    height: 38px;
    object-fit: contain;
    margin-right: 8px;
}


/* ==========================================================
   MOBIL NÉZET – Vending Machines
   Desktop elrendezés változatlan marad
   ========================================================== */
@media (max-width: 767.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .navbar .container-fluid {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .navbar-brand {
        max-width: 100%;
        min-width: 0;
        font-size: 18px !important;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .vm-header-logo {
        width: 58px;
        height: 32px;
        margin-right: 5px;
        flex: 0 0 auto;
    }

    .navbar .ms-auto {
        width: 100%;
        margin-left: 0 !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px !important;
    }

    .navbar .btn,
    .navbar .form-select,
    .navbar span.text-white {
        font-size: 13px;
    }

    .navbar .text-white {
        margin-left: 0 !important;
    }

    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        margin-bottom: 14px;
    }

    .page-title {
        font-size: 24px;
    }

    .table-container,
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #machinesTable {
        min-width: 1500px;
    }

    .table-responsive {
        max-height: 570px;
    }

    #machinesTable thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .btn {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .navbar-brand {
        font-size: 16px !important;
    }

    .vm-header-logo {
        width: 50px;
        height: 30px;
    }

    .navbar .btn,
    .navbar .form-select {
        font-size: 12px;
    }

    .page-title {
        font-size: 22px;
    }

    #machinesTable {
        min-width: 1400px;
    }
}

/* --- login --- */

body:has(.login-card) {
    background:
        linear-gradient(rgba(5,12,22,.22), rgba(8,10,18,.34)),
        url("bg.jpg") center center / cover fixed no-repeat !important;
}

.login-card {
    max-width: 430px;
}

.login-card .card {
    background: rgba(8,17,31,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(34px) saturate(175%);
    -webkit-backdrop-filter: blur(34px) saturate(175%);
}

.login-card .card-body {
    background: transparent !important;
}

.login-card .text-muted,
.login-card label {
    color: rgba(255,255,255,.80) !important;
}

.login-card .form-control {
    background: rgba(255,255,255,.10) !important;
}