/* =========================================================================
   GKI Ratings — Production System | alap stíluslap
   Arculat: Poppins, anthracite #40454D, bg #F3F3F3, Ratings purple #6C63FF
   ========================================================================= */

/* --- Poppins (self-hosted) ---------------------------------------------- */
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/poppins/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/poppins/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/poppins/Poppins-Bold.ttf') format('truetype'); }

/* --- Design tokenek ----------------------------------------------------- */
:root{
  --anthracite:#40454D;
  --bg:#F3F3F3;
  --surface:#FFFFFF;
  --purple:#6C63FF;     /* Ratings */
  --orange:#EF8734;     /* Research / figyelmeztetés */
  --green:#0AA06A;      /* Academy / siker */
  --muted:#717182;
  --border:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.16);
  --text:#2B2F36;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.10);
  --sidebar-w:264px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--purple); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0; font-weight:600; color:var(--anthracite);}

/* --- App shell ---------------------------------------------------------- */
.app{display:flex; min-height:100vh;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--anthracite); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar__brand{padding:28px 28px 24px; border-bottom:1px solid rgba(255,255,255,.10);}
.sidebar__eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); margin:0 0 6px;}
.sidebar__title{font-size:21px; font-weight:500; color:#fff; line-height:1.2;}
.sidebar__sub{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:6px;}
.sidebar__nav{flex:1; padding:16px 12px; overflow-y:auto;}
.sidebar__navlabel{padding:0 12px; margin:4px 0 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45);}
.navitem{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--radius-sm); color:rgba(255,255,255,.88);
  margin-bottom:2px; transition:background .15s; cursor:pointer;
}
.navitem:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff;}
.navitem.is-active{background:rgba(108,99,255,.18); color:#fff;}
.navitem.is-active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 4px 4px 0; background:var(--purple);}
.navitem.is-disabled{opacity:.5; cursor:not-allowed;}
.navitem__icon{width:20px; height:20px; flex:0 0 20px; color:rgba(255,255,255,.75);}
.navitem.is-active .navitem__icon{color:var(--purple);}
.navitem__label{font-size:14.5px;}
.navitem__desc{display:block; font-size:11.5px; color:rgba(255,255,255,.45); margin-top:1px;}
.navitem.is-active .navitem__desc{color:rgba(255,255,255,.7);}
.sidebar__foot{padding:16px; border-top:1px solid rgba(255,255,255,.10);}
.sidebar__status{background:rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:14px;}
.sidebar__status b{display:flex; align-items:center; gap:8px; font-weight:500; font-size:13px;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--green);}
.sidebar__status p{margin:8px 0 0; font-size:12px; color:rgba(255,255,255,.55); line-height:1.5;}

/* Main column */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:68px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:20px; padding:0 28px; position:sticky; top:0; z-index:5;
}
.topbar__title{font-size:17px; font-weight:600;}
.topbar__spacer{flex:1;}
.topbar__user{display:flex; align-items:center; gap:12px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px;}
.topbar__user small{display:block; color:var(--muted); font-size:12px;}
.content{padding:28px; max-width:1440px; width:100%;}

/* --- Page header -------------------------------------------------------- */
.page-head{margin-bottom:24px;}
.page-head h1{font-size:24px;}
.page-head p{margin:6px 0 0; color:var(--muted);}

/* --- Cards -------------------------------------------------------------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card__head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px;}
.card__head h3{font-size:15px;}
.card__body{padding:20px;}

/* KPI grid */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:24px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);}
.kpi__label{font-size:13px; color:var(--muted);}
.kpi__value{font-size:30px; font-weight:700; color:var(--anthracite); margin-top:6px; line-height:1;}
.kpi__hint{font-size:12px; color:var(--muted); margin-top:8px;}
.kpi--accent{border-top:3px solid var(--purple);}
.kpi--warn{border-top:3px solid var(--orange);}
.kpi--ok{border-top:3px solid var(--green);}

/* --- Tables ------------------------------------------------------------- */
.table-wrap{overflow-x:auto;}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl th{ text-align:left; padding:12px 16px; color:var(--muted); font-weight:500; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap;}
.tbl td{padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#FAFAFB;}

/* --- Badges ------------------------------------------------------------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:500; line-height:1.6;}
.badge--gray{background:#EEF0F2; color:#5A616B;}
.badge--purple{background:rgba(108,99,255,.12); color:#5249e0;}
.badge--orange{background:rgba(239,135,52,.14); color:#c96a1c;}
.badge--green{background:rgba(10,160,106,.14); color:#0a7d54;}
.badge--red{background:rgba(220,53,69,.12); color:#c23341;}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--radius-sm); font-family:inherit; font-size:14px; font-weight:500;
  border:1px solid transparent; cursor:pointer; transition:opacity .15s, background .15s;}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--orange); color:#fff;}
.btn--primary:hover{opacity:.9; color:#fff;}
.btn--purple{background:var(--purple); color:#fff;}
.btn--purple:hover{opacity:.9; color:#fff;}
.btn--ghost{background:transparent; color:var(--anthracite); border-color:var(--border-strong);}
.btn--ghost:hover{background:#F1F1F3;}
.btn--block{width:100%;}
.btn--sm{padding:7px 12px; font-size:13px;}
.btn--link{background:none; border:none; color:var(--orange); padding:0; cursor:pointer; font:inherit;}

/* --- Forms -------------------------------------------------------------- */
.field{margin-bottom:18px;}
.field label{display:block; font-size:14px; color:var(--anthracite); margin-bottom:7px;}
.input, select.input{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; color:var(--text); background:#fff;
}
.input:focus, select.input:focus{outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(108,99,255,.15);}

/* --- Alerts ------------------------------------------------------------- */
.alert{padding:12px 16px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px; border:1px solid transparent;}
.alert--error{background:rgba(220,53,69,.08); border-color:rgba(220,53,69,.25); color:#a52834;}
.alert--info{background:rgba(108,99,255,.08); border-color:rgba(108,99,255,.25); color:#4b43cf;}
.alert--success{background:rgba(10,160,106,.10); border-color:rgba(10,160,106,.30); color:#0a7d54;}

/* --- Forms (create/edit) ------------------------------------------------ */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 24px;}
.form-grid .field--full{grid-column:1 / -1;}
@media (max-width:760px){ .form-grid{grid-template-columns:1fr;} }
.form-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:8px; padding-top:18px; border-top:1px solid var(--border);}
.checkline{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.checkline input[type=checkbox]{width:18px; height:18px; accent-color:var(--purple);}
.help{font-size:12px; color:var(--muted); margin-top:-12px; margin-bottom:16px;}
.req{color:var(--orange);}
.rolegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px;}

/* --- Empty state -------------------------------------------------------- */
.empty{padding:32px; text-align:center; color:var(--muted); font-size:13.5px;}

/* --- Auth screens ------------------------------------------------------- */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--bg);}
.auth__bg{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.auth__shape{position:absolute; opacity:.06;}
.auth__shape--1{top:-80px; right:-80px; width:380px; height:380px;
  background:linear-gradient(135deg,var(--orange),var(--purple));
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); transform:rotate(15deg);}
.auth__shape--2{bottom:-128px; left:-128px; width:500px; height:500px;
  background:linear-gradient(45deg,var(--green),var(--orange));
  clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);}
.auth__card{position:relative; z-index:1; width:100%; max-width:440px;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:44px;}
.auth__logo{text-align:center; margin-bottom:36px;}
.auth__logo h1{font-size:30px; font-weight:500; color:var(--anthracite);}
.auth__head{margin-bottom:28px;}
.auth__head h2{font-size:21px; font-weight:500;}
.auth__head p{margin:8px 0 0; color:var(--muted);}

/* Role selection */
.rolelist{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.roleopt{display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, background .15s;}
.roleopt:hover{border-color:var(--purple); background:rgba(108,99,255,.04);}
.roleopt input{accent-color:var(--purple); width:18px; height:18px;}
.roleopt b{font-weight:500; color:var(--anthracite);}
.roleopt small{display:block; color:var(--muted); margin-top:2px;}

/* --- Detail layout ------------------------------------------------------ */
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;}
@media (max-width:1100px){ .detail-grid{grid-template-columns:1fr;} }
.info-list{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0;}
.info-list dt{color:var(--muted); font-size:13px;}
.info-list dd{margin:0; font-size:14px; color:var(--text);}

/* --- Workflow timeline -------------------------------------------------- */
.timeline{display:flex; align-items:flex-start; justify-content:space-between; gap:4px; position:relative;}
.timeline__step{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.timeline__step::before{content:""; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--border-strong);}
.timeline__step:first-child::before{display:none;}
.timeline__step.is-done::before, .timeline__step.is-current::before{background:var(--purple);}
.timeline__dot{width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--border-strong); z-index:1;}
.timeline__step.is-done .timeline__dot{background:var(--green); border-color:var(--green);}
.timeline__step.is-current .timeline__dot{background:var(--purple); border-color:var(--purple); box-shadow:0 0 0 4px rgba(108,99,255,.18);}
.timeline__label{font-size:12px; margin-top:8px; color:var(--muted); max-width:90px;}
.timeline__step.is-current .timeline__label{color:var(--anthracite); font-weight:600;}

/* --- Tabs --------------------------------------------------------------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap;}
.tab{padding:10px 16px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer;}
.tab:hover{color:var(--anthracite); text-decoration:none;}
.tab.is-active{color:var(--purple); border-bottom-color:var(--purple); font-weight:500;}

/* --- Filter bar --------------------------------------------------------- */
.filterbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px;}
.filterbar .field{margin:0; min-width:200px;}
.filterbar label{font-size:12px; color:var(--muted); margin-bottom:4px;}

/* --- Section subtitle in tables ---------------------------------------- */
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:28px 0 12px;}

/* --- Elemzői munkaterület (3 oszlop) ------------------------------------ */
.ws-grid{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:20px; align-items:start;}
@media (max-width:1200px){ .ws-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:820px){ .ws-grid{grid-template-columns:1fr;} }

/* Cégadatok tények */
.fact{padding:9px 0; border-bottom:1px solid var(--border);}
.fact:last-child{border-bottom:none;}
.fact__k{display:block; font-size:12px; color:var(--muted);}
.fact__v{display:block; font-size:14.5px; font-weight:500; color:var(--anthracite); margin-top:2px;}

/* Forrás-kártya */
.src-card{border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px;}
.src-card:last-child{margin-bottom:0;}
.src-card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.src-card__type{font-size:11.5px; color:var(--muted);}
.src-card__name{font-size:14px; font-weight:500; color:var(--anthracite); margin-top:2px;}
.src-card__foot{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
.src-card__meta{font-size:12px; color:var(--muted);}
.src-card__actions{display:flex; gap:6px;}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--border); color:var(--muted); background:#fff;}
.iconbtn:hover{color:var(--purple); border-color:var(--purple); text-decoration:none;}

/* Peer-kártya */
.peer-card{border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px;}
.peer-card:last-child{margin-bottom:0;}
.peer-card__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.peer-card__metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.peer-card__metrics span{display:block; font-size:11.5px; color:var(--muted);}
.peer-card__metrics b{font-size:13.5px; color:var(--anthracite);}

/* Belső vélemény */
.op-block{margin-bottom:14px;}
.op-label{font-size:12px; color:var(--muted); margin-bottom:3px;}
.op-rec{font-size:16px; font-weight:600; color:var(--purple);}

/* Validációs státusz sorok */
.val-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px;}
.val-row:last-child{border-bottom:none;}
.vchk{font-weight:700;}
.vchk--ok{color:var(--green);}
.vchk--warn{color:var(--orange);}

details > summary{list-style:none; cursor:pointer;}
details > summary::-webkit-details-marker{display:none;}

/* Értesítés-harang legördülő (CSS-only, <details>) */
.notif{position:relative;}
.notif__bell{position:relative; width:38px; height:38px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--anthracite); border:1px solid var(--border-strong); background:#fff;}
.notif__bell:hover{background:var(--bg);}
.notif__bell svg{width:19px; height:19px;}
.notif__badge{position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--orange); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;}
.notif[open] .notif__bell{border-color:var(--purple); color:var(--purple);}
.notif__panel{position:absolute; top:46px; right:0; width:340px; max-height:440px; overflow:auto;
  background:#fff; border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14); z-index:50; padding:6px;}
.notif__head{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--border);}
.notif__empty{padding:22px 12px; text-align:center; color:var(--muted); font-size:13px;}
.notif__item{display:block; padding:10px 10px; border-radius:8px; color:var(--anthracite);}
.notif__item:hover{background:var(--bg);}
.notif__item.is-unread{background:rgba(108,99,255,.06);}
.notif__item.is-unread .notif__title::before{content:""; display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--purple); margin-right:7px; vertical-align:middle;}
.notif__title{font-weight:600; font-size:13px;}
.notif__body{font-size:12px; color:var(--muted); margin-top:2px;}
.notif__time{font-size:11px; color:var(--muted); margin-top:4px;}
.notif__all{display:block; text-align:center; padding:10px; font-size:13px; font-weight:600; border-top:1px solid var(--border);}
.iconlink{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--anthracite); border:1px solid var(--border-strong); background:#fff;}
.iconlink:hover{background:var(--bg); color:var(--purple);}
.iconlink svg{width:19px; height:19px;}

@media (max-width:900px){
  .sidebar{display:none;}
  .notif__panel{width:290px;}
}