@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Ubuntu:wght@400;700&display=swap');

:root{
  --primary:#187795;
  --primary-text:#ffffff;
  --text:#5D646E;
  --error:#e74c3c;
  --page-bg:#ffffff;
  --form-bg:#DDD8C8;
  --box-bg:#ffffff;
  --input-border:#e5e5e5;
  --max-width:480px;
  --radius:8px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:var(--page-bg);-webkit-font-smoothing:antialiased}
.page-auth{background:var(--form-bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.container{width:100%;max-width:var(--max-width);margin:0 auto}
.card{background:var(--box-bg);padding:24px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(60,64,67,.3)}
.logo{display:block;margin:0 auto 10px;max-height:60px}
h1{font-family:Ubuntu,Arial,sans-serif;color:var(--text);margin:0 0 12px;font-size:20px}
h2{font-size:30px}
h3{font-size:26px;text-align:center}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}
p.lead{margin:0 0 14px;color:var(--text);line-height:1.45}
label{display:block;margin:12px 0 6px;font-size:14px}
input[type="text"],input[type="email"],input[type="password"],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--input-border);border-radius:6px;font-size:15px;
  background:#fff;color:var(--text);
}
.btn{display:inline-block;background:var(--primary);color:var(--primary-text);padding:12px 18px;border-radius:10px;border:none;cursor:pointer;font-weight:600;text-decoration:none}
.btn:active{transform:translateY(1px)}
.links{margin-top:12px}
.link{color:var(--text);text-decoration:none}
.msg{padding:10px;background:#f6f6f6;border-left:4px solid var(--primary);margin-bottom:12px;color:var(--text)}
.error{color:var(--error);padding:8px 0;margin-bottom:8px}

/* Dashboard layout */
.page-dashboard{min-height:100vh;background:var(--page-bg);display:flex;flex-direction:column}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #f0f0f0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.header .logo-small{height:36px}
.header .logout-btn{background:var(--primary);border:1px solid #eee;font-size:14px;padding:12px 18px;border-radius:8px;color:#fff;cursor:pointer}
.layout{display:flex;flex:1;min-height:calc(100vh - 60px)}
.sidebar{width:260px;max-height:100%;border-right:1px solid #f0f0f0;padding:20px;background:#fff}
.sidebar .menu{list-style:none;padding:0;margin:0}
.sidebar .menu li{margin-bottom:10px}
.sidebar .menu a{display:block;padding:10px;border-radius:8px;color:var(--text);text-decoration:none}
.sidebar .menu a:hover{background:#bfd6df;color:var(--text)}
.sidebar .menu a.active{background:var(--primary);color:var(--primary-text)}
.content{flex:1;padding:24px;background:var(--page-bg)}
.card-small{background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 18px rgba(60,64,67,.3)}
.hamburger:any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  width: 44px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}
/* Alap: rejtve */
.mobile-menu {
    display: none;
}

/* Ha GET paraméter miatt nyitva van */
.mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 10px 0;
}

/* Lista stílus */
.mobile-menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* függőleges lista */
    gap: 10px;
    align-items: center;
}

.mobile-menu .menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background 0.2s;
}

.mobile-menu .menu li a:hover,
.mobile-menu .menu li a.active {
    background: #f0f0f0;
}


/* Responsive */
@media (max-width: 768px){
  .layout{display:flex;flex-direction:column}
  .sidebar{width:100%;order:1;border-right:none;border-top:1px solid #f0f0f0}
  .content{order:2}
  .header{padding:10px}
  .header .center-item{order:0}
  .header .right-item{order:2}
  .sidebar .menu a{display:flex;margin-right:8px}
  :root{--max-width:420px}
}