/* RP Admin Panel style */
:root{
  --panel-bg: #0e121a;
  --panel-bg2: #0a0d13;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.55);
  --muted2: rgba(255,255,255,.38);
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius: 16px;
}

html, body { height:100%; }
body{
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 15% 15%, rgba(90,120,255,.18), transparent 55%),
    radial-gradient(1000px 700px at 80% 10%, rgba(40,80,140,.16), transparent 55%),
    radial-gradient(1000px 800px at 60% 90%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, var(--panel-bg) 0%, var(--panel-bg2) 100%);
  overflow-x:hidden;
}

/* ---------- Layout to match the reference screenshot ---------- */
.app-shell{
  padding: 18px;
  gap: 18px;
}

.main-area{
  padding: 12px 10px 24px 10px;
}
@media (min-width: 768px){
  .main-area{ padding: 14px 18px 28px 18px; }
}

.topbar-min{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 0;
  backdrop-filter: none;
}

.btn-refresh{
  padding: 10px 12px;
  border-radius: 14px;
}

.user-pill-wide{
  padding: 10px 14px;
  min-width: 220px;
}

#sidebar{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}


a{ color: inherit; }
::selection{ background: rgba(120,150,255,.25); }

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.brand-logo{
  width:44px;height:44px;
  border-radius: 12px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.brand-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 14px;
  opacity:.95;
}
.brand-sub{ font-size: 12px; color: var(--muted2); margin-top: 2px; }

.nav-item, .nav-btn{
  display:flex; align-items:center; gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.72);
  user-select:none;
}
.nav-item:hover, .nav-btn:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.nav-item.active, .nav-btn.active{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
}
.nav-ic{
  width:34px;height:34px;border-radius: 12px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.topbar-left{ display:flex; align-items:center; gap: 12px; }
.page-title{ font-size: 30px; font-weight: 900; letter-spacing: -0.03em; }
.page-sub{ font-size: 13px; color: var(--muted); margin-top: 2px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.btn:hover{ background: rgba(255,255,255,.06); }
.btn-ghost{ background: rgba(0,0,0,.14); }

.user-pill{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}
.user-ic{
  width:34px;height:34px;border-radius: 12px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.user-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background-image: url("/static/avatar.png");
  background-size: cover;
  background-position: center;
  color: transparent; /* betű eltűnik */
}
.user-name{ font-weight: 900; line-height: 1.1; }
.user-tag{ font-size: 12px; color: var(--muted2); }

.brand-img {
  width: 40px;
  height: 40px;
  border-radius:50%;
  object-fit: contain;
  background-size: cover;
  background-position: center;
  color: transparent;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.pad{ padding: 16px; }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .kpi-grid{ grid-template-columns: 1fr; }
}
.kpi-title{ font-size: 13px; color: var(--muted); font-weight: 700; display:flex; align-items:center; gap:8px;}
.kpi-value{ font-size: 34px; font-weight: 950; letter-spacing: -0.03em; margin-top: 6px; }
.kpi-sub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }
.kpi-ic{
  width: 44px; height: 44px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 20px;
}

.kpi{
  display:flex;
  align-items:center;
  gap: 14px;
}

.chev{
  text-align:right;
  color: rgba(255,255,255,.35);
  font-size: 20px;
  width: 24px;
}

.table-modern{
  width: 100%;
  /* Stabil oszlopszélességek, hogy a fejléc és a sorok ne csússzanak el */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.table-modern th, .table-modern td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
.table-modern th{
  font-size: 13px;
  color: rgba(255,255,255,.70);
  text-transform:none;
  letter-spacing: .01em;
  background: rgba(255,255,255,.05);
  text-align: left; /* a <th> default középre igazít, ettől néz ki "elcsúszva" */
}

/* Requests tábla: a "Művelet" oszlop maradjon mindig látható */
.table-modern th.actions,
.table-modern th.actions{
  z-index: 2;
}

/* Alap oszlopszélességek (sok nézet 4 oszlopos) */
.table-modern:not(.table-requests) th:nth-child(1),
.table-modern:not(.table-requests) td:nth-child(1){ width: 48%; }
.table-modern:not(.table-requests) th:nth-child(2),
.table-modern:not(.table-requests) td:nth-child(2){ width: 22%; }
.table-modern:not(.table-requests) th:nth-child(3),
.table-modern:not(.table-requests) td:nth-child(3){ width: 15%; text-align: center; }
.table-modern:not(.table-requests) th:nth-child(4),
.table-modern:not(.table-requests) td:nth-child(4){ width: 15%; }

/* Requests tábla: 6 oszlop (Név, Bekerülés, Tárgy, Indok, Státusz, Művelet)
   Fontos: az első 4 oszlop eddig 100%-ot vitt el, ezért a Státusz+Művelet "eltűnt". */
.table-requests th:nth-child(1), .table-requests td:nth-child(1){ width: 40%; }
.table-requests th:nth-child(2), .table-requests td:nth-child(2){ width: 18%; }
.table-requests th:nth-child(3), .table-requests td:nth-child(3){ width: 12%; text-align:center; }
.table-requests th:nth-child(4), .table-requests td:nth-child(4){ width: 14%; }
.table-requests th:nth-child(5), .table-requests td:nth-child(5){ width: 10%; text-align:center; }
.table-requests th:nth-child(6), .table-requests td:nth-child(6){ width: 6%; text-align:center; }
.table-modern tr:last-child td{ border-bottom: none; }
.table-modern tr:hover td{ background: rgba(255,255,255,.03); }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.10);
}
.badge.ok{ background: rgba(34,197,94,.18); }
.badge.warn{ background: rgba(245,158,11,.18); }
.badge.bad{ background: rgba(239,68,68,.18); }

.status-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){ .status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .status-grid{ grid-template-columns: 1fr; } }

.status-box{
  display:flex; flex-direction:column; gap: 10px;
}
.status-pill{
  display:flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.status-pill.ok{ background: rgba(34,197,94,.20); }
.status-pill.bad{ background: rgba(239,68,68,.20); }
.status-pill.warn{ background: rgba(245,158,11,.20); }

.footer-note{
  text-align:right;
  color: rgba(255,255,255,.40);
  font-size: 12px;
  margin-top: 10px;
}

/* Mini gombok (pl. törlés a táblában) */
.btn.btn-mini{
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}
.btn.btn-danger{
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.35);
}
.btn.btn-danger:hover{
  background: rgba(239,68,68,.25);
}

/* Sidebar width + always visible on desktop */
@media (min-width: 768px){
  #sidebar{ transform: translateX(0) !important; position: sticky; top: 18px; height: calc(100vh - 36px); }
}

/* Small scrollbar */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid rgba(0,0,0,.25); }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); }


/* requests table */
.table.table-requests th:nth-child(1), .table.table-requests td:nth-child(1){width:45%;}
.table.table-requests th:nth-child(2), .table.table-requests td:nth-child(2){width:20%;}
.table.table-requests th:nth-child(3), .table.table-requests td:nth-child(3){width:12%;}
.table.table-requests th:nth-child(4), .table.table-requests td:nth-child(4){width:13%;}
.table.table-requests th:nth-child(5), .table.table-requests td:nth-child(5){width:10%;}

/* FINAL CLEAN: requests table exact 5 columns */
.table-requests {
  table-layout: fixed;
  width: 100%;
}

.table-requests th:nth-child(1),
.table-requests td:nth-child(1) { width: 40%; }
.table-requests th:nth-child(2),
.table-requests td:nth-child(2) { width: 18%; }
.table-requests th:nth-child(3),
.table-requests td:nth-child(3) { width: 12%; }
.table-requests th:nth-child(4),
.table-requests td:nth-child(4) { width: 15%; }
.table-requests th:nth-child(5),
.table-requests td:nth-child(5) { width: 15%; }

.table-requests th,
.table-requests td {
  overflow: hidden;
}


/* Topbar cleanup: name left, logout right */
.logout-btn{
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
}
.logout-btn:active{ transform: translateY(1px); }

@media (max-width: 768px){
  .topbar-min{ padding: 10px 10px; }
  #userPill{ flex: 1; }
  .user-name{ max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}