/* ======================================================================
   Alap változók (színek, felületi elemek, méretek)
   - A portal-specifikus változók (max szélesség, padding, gap) is itt vannak.
   ====================================================================== */
:root{
  /* háttér átmenet */
  --bg-top:#ffffff;
  --bg-mid:#bfe0f2;        /* finom világoskék átmenet */
  --bg-bot:#2f99d3;        /* alsó kék */

  /* színek */
  --brand:#2563eb;
  --text:#222;
  --muted:#555;
  --input:#e5e7eb;
  --card:#fff;
  --error:#b00020;

  /* portál keret (főoldal) */
  --portal-maxw:1300px;
  --portal-pad:20px;
  --portal-gap:16px;
}

/* ======================================================================
   Globális beállítások
   ====================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background: linear-gradient(180deg,var(--bg-top) 0%, var(--bg-mid) 35%, var(--bg-bot) 100%) fixed no-repeat;
  background-attachment: fixed;
}

/* ======================================================================
   Layout: wrap + card
   - A login oldal és más lapok is ezt használják.
   - A főoldalon a .portal-shell alatti .card-ot később felülírjuk (full width).
   ====================================================================== */
.wrap{
  /* általános oldalsó padding, loginon is jó */
  margin:20px auto;
  padding:0 16px;
  max-width: 100%;
}

.card{
  background: var(--card);
  border-radius: 16px;
  /* mindig hagyjon két oldalt kis hézagot (16+16px),
     de asztalin ne legyen 520px-nél szélesebb (LOGIN) */
  width: min(520px, calc(100% - 32px));
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  padding: 28px;
  margin: 0 auto; /* vízszintesen középre */
  position: relative;
}

/* ======================================================================
   Fejléc (logo + felirat)
   ====================================================================== */
.logo-title,
.header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;    /* mindig bal szél */
  gap:6px;
  margin-bottom:4px;
}

.logo-title img,
.header img{
  height:54px;
  max-width:100%;
}

.subtitle{
  margin:0 0 18px 0;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;   /* mindig egy sor */
  overflow:hidden;      /* nincs sortörés */
  text-overflow:clip;   /* nincs "..." */
  text-align:left;
  font-size:26px;
  max-width:100%;
}

/* Fejléc mobil finomhangolás */
@media (max-width:560px){
  .logo-title img,
  .header img{ height:40px; }
  .subtitle{ font-size:20px; }
}
@media (max-width:380px){
  .logo-title img,
  .header img{ height:34px; }
  .subtitle{ font-size:16px; }
}

/* ======================================================================
   Űrlap elemek (login / modal)
   ====================================================================== */
form label{
  display:block;
  font-weight:600;
  margin:10px 0 6px;
  color:var(--text);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"]{
  display:block;
  width:100%;
  padding:12px;
  border:1px solid var(--input);
  border-radius:10px;
  outline:none;
  font-size:16px;
  background:#fff;
}

.error{
  background:#fde8e8;
  border:1px solid #f5c2c7;
  color:var(--error);
  padding:10px 12px;
  border-radius:10px;
  margin-top:8px;
  font-weight:600;
}

.row{ margin-top:14px; }

/* ======================================================================
   Gombok
   ====================================================================== */
.btn{
  display:inline-block;
  text-align:center;
  padding:12px 16px;
  border-radius:10px;
  border:0;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s, filter .15s;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.btn:hover{ filter:brightness(.95); transform:translateY(-1px); }
.btn:link,.btn:visited{ color:#fff; }

.btn-block{ display:block; width:100%; }   /* pl. login gombnak */
.btn-secondary{ background:#6b7280; }

/* Kijelentkezés / admin gombok tárolója (középre igazítva) */
.logout-wrap{
  margin: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative; z-index: 20; /* minden felett kattintható */
}
.logout-wrap .btn{ min-width:220px; }
.logout-wrap .btn { position: relative; z-index: 21; }

/* Bejelentkezett felhasználó kijelzése */
.who{
  font-size:18px;
  font-weight:600;
  margin:28px 0 8px;
  text-align:left;
  color:#555;
}

/* ======================================================================
   Régi, általános rács (legacy)
   - Ha valahol class="grid" kell, maradjon; a főoldali rácsot ettől függetlenítjük.
   ====================================================================== */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;  /* asztalin 2 oszlop */
  gap:14px;
  justify-content:stretch;
  align-items:stretch;
  position: relative; z-index: 1;
}

.app-btn{ display:block; }

/* ======================================================================
   Jelszó-módosító modál
   ====================================================================== */
.modal{
  display:none;                /* alapból rejtve */
  position:fixed;
  z-index:1000;
  left:0; top:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
  pointer-events: none;        /* csak látható állapotban kapjon eseményt */
}
.modal[style*="display:flex"],
.modal[style*="display: flex"] { pointer-events: auto; }

.modal-content{
  background:#fff;
  padding:20px;
  border-radius:12px;
  max-width:400px;
  width:90%;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.close{
  float:right;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
}

/* Modál üzenetek */
#pw-msg{
  display:none; margin:10px 0; padding:8px 10px; border-radius:8px; font-weight:600;
}
#pw-msg.ok { background:#ecfdf5; border:1px solid #34d399; color:#065f46; }
#pw-msg.err{ background:#fef2f2; border:1px solid #fca5a5; color:#7f1d1d; }

/* Modál inputok ne lógjanak túl */
#pw-modal input[type="password"],
#pw-modal input[type="text"],
#pw-modal input[type="email"]{
  width:100%;
  max-width:100%;
}

/* Kényelmesebb modál szélesség */
#pw-modal .modal-card{
  max-width:420px;
  width:90vw;         /* mobilon se csússzon ki */
  padding:16px;
  border-radius:12px;
}

/* ======================================================================
   Mobil finomhangolás (login + általános)
   - A kártya sose érjen a kijelző széléhez
   - Gombok egymás alatt, középen
   ====================================================================== */
@media (max-width:640px){
  .wrap{ padding:12px; }       /* külső ráhagyás a wrapben */

  .card{
    width: calc(100% - 24px);  /* ~12px oldalanként */
    max-width:520px;           /* login kártya limitje */
    margin:0 auto;
  }

  /* gombok mobilon egymás alatt, teljes szélességben */
  .logout-wrap{ margin-top:18px; }
  .logout-wrap .btn,
  .btn.btn-block{
    width:100%;
    display:block;
    min-width:0;               /* megelőzi a túlcsordulást */
  }
}

/* Nagyon keskeny kijelzőkhöz minimális zsugorítás */
@media (max-width:380px){
  .card{ padding:14px; width:96vw; }
}

/* ======================================================================
   PORTÁL KERET (csak főoldal) – max 1300px, középre
   - A login oldal NEM használ portal-shell-t, így ott marad a 520px limit.
   ====================================================================== */
.portal-shell{
  max-width: var(--portal-maxw);
  margin: 20px auto 24px;
  padding: 0 var(--portal-pad);
}

/* Főoldali kártya a kereten belül legyen teljes szélességű */
.portal-shell .card{
  width: 100%;
  max-width: none;
}

/* ======================================================================
   Főoldali link rács és képes gombok (csak portal-shell alatt)
   - Nem örököli a globális .grid szabályt; saját gridekkel dolgozik.
   ====================================================================== */
.portal-shell #links-grid,
.portal-shell #links-grid.grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: var(--portal-gap) !important;
  align-items: stretch !important;
  justify-items: center !important;
}

/* Képes gomb – csak a rácsban lévő app-btn elemekre a főoldalon */
.portal-shell #links-grid .app-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  min-width: 160px;
  min-height: 100px;
  padding: 10px 12px;
  text-align: center;
  box-sizing: border-box;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Logó-konténer: fix vizuális magasság, szélességben rugalmas (desktopon 120px) */
.portal-shell #links-grid .logo-wrap{
  width: 120px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kép: soha ne lépje túl a dobozt; arányt tartjuk */
.portal-shell #links-grid .app-logo{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background:#fff;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  padding:2px 4px;
}

/* Felirat a kép alatt, tördeléssel */
.portal-shell #links-grid .app-label{
  display:block;
  line-height:1.2;
  word-break: break-word;
}

/* Hover effektek (asztali) */
.portal-shell #links-grid .app-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* ======================================================================
   Főoldal mobil finomhangolás (portal-shell alatt)
   - 1 oszlopos rács
   - képek/gombok 100% szélességgel, nem lógnak ki
   ====================================================================== */
@media (max-width: 640px){
  .portal-shell{ padding: 0 12px; }

  .portal-shell #links-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .portal-shell #links-grid .app-btn{
    max-width: 100%;
    min-width: 0;
    width: 100%;
    padding: 10px;
  }

  .portal-shell #links-grid .logo-wrap{
    width: 100%;
    max-width: 220px;  /* belső maximum, hogy ne nőjön végtelenre */
    height: 55px;
  }

  .portal-shell #links-grid .app-logo{
    max-width: 100%;
    max-height: 55px;
  }
}

/* ======================================================================
   Apróságok
   ====================================================================== */
.app-icon{
  width:18px; height:18px; vertical-align:middle; margin-right:6px; border-radius:4px;
}

/* ===== MOBILE HOTFIX A FŐOLDALI RÁCSHOZ (PORTAL) ===== */
@media (max-width: 768px){
  /* 1) a rács legyen 1 oszlop, még ha class="grid" is rajta maradt */
  .portal-shell #links-grid,
  .portal-shell #links-grid.grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-items: center !important;
  }

  /* 2) a gombok ne nőjenek túl, ne legyen kötelező minimum szélesség/magasság */
  .portal-shell #links-grid .app-btn{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden; /* ha bármi mégis nagyobb, ne lógjon ki */
  }

  /* 3) a logó doboz fix magasságú, szélességben rugalmas */
  .portal-shell #links-grid .logo-wrap{
    width: 100% !important;
    max-width: 220px !important;
    height: 55px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* 4) a kép MINDIG férjen be a dobozba (magasságra igazítunk) */
  .portal-shell #links-grid .app-logo{
    display:block !important;
    height: 100% !important;   /* elsődleges korlát */
    width: auto !important;    /* arányt tartunk */
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* 5) kártya belső padding kicsit kisebb mobilon */
  .portal-shell{ padding: 0 12px !important; }
}