:root {
      --bg: #f5f7f3;
      --bg-soft: #eef2ea;
      --surface: rgba(255,255,255,0.85);
      --surface-strong: #ffffff;
      --text: #162118;
      --muted: #5a665c;
      --primary: #234b2b;
      --primary-2: #356f41;
      --primary-3: #1b3720;
      --accent: #c7d8b3;
      --accent-2: #d8e3ca;
      --warning: #b9872f;
      --danger: #9d4839;
      --line: rgba(35,75,43,0.12);
      --line-strong: rgba(35,75,43,0.2);
      --shadow: 0 16px 38px rgba(22,33,24,0.08);
      --radius-xl: 20px;
      --radius-lg: 18px;
      --radius-md: 14px;
      --max: 1320px;
    }
	
    *{box-sizing:border-box;margin:0;padding:0;}
    
	html{scroll-behavior:smooth;}
    
	body{
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left,rgba(199,216,179,.45),transparent 28%),
        radial-gradient(circle at right top,rgba(53,111,65,.08),transparent 24%),
        linear-gradient(180deg,#f7f9f5 0%,#f1f5ee 100%);
      line-height:1.55;
    }
	
    a{color:inherit;text-decoration:none;}
    img{max-width:100%;display:block;}
	img:hover {cursor: pointer;}
    .container{width:min(calc(100% - 30px),var(--max));margin:0 auto;}
	li{margin-left:2em;}
	
	.kep{border:1px solid rgba(35,75,43,.5);border-radius:20px;}

    /* Glass / card base */
    .glass,.card,.hero-card,.side-panel,.toolbar,.table-wrap,.footer-card,.download-panel,.map-shell{
      background:var(--surface);
      border:1px solid rgba(0,0,0,.3);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
      border-radius:var(--radius-xl);
    }

    /* ── TOPBAR ── */
    .topbar{position:sticky;top:0;z-index:100;background:rgba(245,247,243,.93);backdrop-filter:blur(18px);border-bottom:1px solid rgba(35,75,43,.08);}
    .nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
    .brand{display:flex;align-items:center;gap:14px;}
    .brand-mark{
      width:50px;height:50px;border-radius:50%;
      background:linear-gradient(135deg,var(--primary-3),var(--primary),var(--primary-2));
      color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:.06em;
      box-shadow:0 8px 20px rgba(35,75,43,.22);flex:0 0 auto;
    }
    .brand-text strong{display:block;font-size:.98rem;line-height:1.2;}
    .brand-text span{display:block;font-size:.82rem;color:var(--muted);margin-top:3px;}
    .menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
    .menu a,.menu button{border:0;background:transparent;color:var(--muted);font:inherit;padding:9px 13px;border-radius:999px;cursor:pointer;transition:.2s ease;font-size:.9rem;}
    .menu a:hover,.menu button:hover{background:rgba(35,75,43,.08);color:var(--primary);}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:700;background:linear-gradient(135deg,var(--primary-3),var(--primary-2));color:white;box-shadow:0 10px 22px rgba(35,75,43,.18);transition:.2s ease;border:none;cursor:pointer;font:inherit;}
    .button:hover{transform:translateY(-1px);}
    .button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:999px;font-weight:700;background:rgba(255,255,255,.8);color:var(--primary);border:1px solid rgba(35,75,43,.14);transition:.2s ease;font:inherit;cursor:pointer;}
    .button-secondary:hover{background:#fff;border-color:rgba(35,75,43,.22);}
    .mobile-toggle{display:none;}

    /* ── HERO ── */
    .hero{padding:32px 0 20px;}
    .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch;}
    .hero-card{
      padding:32px;position:relative;overflow:hidden;
      background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
    }
    .hero-card::before{content:"";position:absolute;inset:auto -55px -55px auto;width:200px;height:200px;background:radial-gradient(circle,rgba(199,216,179,.7),transparent 68%);pointer-events:none;}
    .eyebrow{color:var(--primary-2);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;text-align:left;}
    h1{font-size:clamp(2rem,3.8vw,3.8rem);line-height:1.04;margin-bottom:16px;letter-spacing:-.03em;}
    h2{font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:10px;}
    h3{font-size:1.08rem;line-height:1.2;margin-bottom:6px;}
    p{margin-top:0;text-align:justify;}
    .lead{font-size:1rem;color:var(--muted);text-align:justify;}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px;}

    .kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
    .kpi{background:rgba(255,255,255,.78);border:1px solid rgba(35,75,43,.09);border-radius:16px;padding:14px;}
    .kpi strong{display:block;font-size:1.28rem;color:var(--primary);line-height:1;margin-bottom:5px;}
    .kpi span{display:block;color:var(--muted);font-size:.84rem;line-height:1.35;}

	.kpi-grid-5col{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;text-align:center;}
	
	.two_col_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
	.three_col_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
	
	.kpi img{opacity:0.4;}
	.kpi img:hover{opacity:0.8;}

    .hero-side{display:grid;gap:16px;}
    .side-panel{padding:22px;}
	
	.side-panel small{font-size:.64rem;}

    .search-box{display:grid;grid-template-columns:1.2fr .8fr auto;gap:8px;margin-top:14px;}
    .search-box input,.search-box select{
      width:100%;border:1px solid rgba(35,75,43,.14);background:#fff;color:var(--text);
      border-radius:12px;padding:12px 14px;font:inherit;outline:none;
    }
    .search-box input:focus,.search-box select:focus{border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(53,111,65,.08);}
    .quick-links{display:grid;gap:10px;margin-top:12px;}
    .quick-link{
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(35,75,43,.09);transition:.2s ease;
    }
    .quick-link:hover{transform:translateX(3px);border-color:rgba(35,75,43,.18);}
    .quick-link small{color:var(--muted);display:block;margin-top:2px;font-size:.82rem;}

    /* ── SECTIONS ── */
    section{padding:20px 0;}
    .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;}
    .section-head p{color:var(--muted);max-width:72ch;margin-bottom:0;font-size:.94rem;}

    .toolbar{padding:13px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;}
    .toolbar .filters{display:flex;flex-wrap:wrap;gap:8px;}
    .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(35,75,43,.08);color:var(--primary);font-weight:700;font-size:.84rem;}

    /* ── DASHBOARD CHARTS GRID ── */
    .charts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
    .chart-card{padding:18px;}
    .chart-card h3{margin-bottom:4px;font-size:1rem;}
    .chart-sub{color:var(--muted);margin-bottom:12px;font-size:.88rem;}
    .chart-canvas-wrap{position:relative;height:220px;}
    .chart-canvas-wrap canvas{width:100%!important;height:100%!important;}

    /* bar rows (CSS fallback small bars) */
    .bars{display:grid;gap:9px;}
    .bar-row{display:grid;grid-template-columns:120px 1fr 90px;gap:10px;align-items:center;}
    .bar-track{height:11px;border-radius:999px;background:rgba(35,75,43,.08);overflow:hidden;}
    .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#4b8454);transition:width 1.2s ease;}
    .bar-label{font-size:.88rem;}
    .bar-value{text-align:right;color:var(--primary);font-weight:700;font-size:.88rem;}

    /* sparklines */
    .spark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
    .spark-card{background:rgba(255,255,255,.72);border:1px solid rgba(35,75,43,.08);border-radius:16px;padding:14px;}
    .spark-card strong{display:block;margin-bottom:4px;color:var(--primary);font-size:.94rem;}
    .spark-label{font-size:.82rem;color:var(--muted);margin-bottom:6px;}
    .sparkline{width:100%;height:42px;}

    /* ── TABLE ── */
    .table-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;}
    .table-wrap,.download-panel{padding:20px;}
    table{width:100%;border-collapse:collapse;border:0px solid black;font-size:.9rem;}
    th,td{text-align:center;padding:8px 4px;vertical-align:middle;}
    thead th{color:var(--muted);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;}
    tbody tr:hover{background:rgba(207, 205, 149,1);}

	tr:nth-child(even) {background: rgba(245,247,243,1);}
	tr:nth-child(odd) {background: rgba(245,247,243,0.1);}
	tr:nth-child(1) {background: rgba(0,0,0,0.3); font-weight:bold; color:#fff;}
	
	td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}

    .progress{height:9px;min-width:100px;background:rgba(35,75,43,.08);border-radius:999px;overflow:hidden;}
    .progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#4b8454);animation:grow 1.4s ease both;}
    @keyframes grow{from{width:0;}}

    .badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:.79rem;font-weight:700;}
    .up{background:rgba(53,111,65,.12);color:var(--primary);}
    .flat{background:rgba(185,135,47,.12);color:#7a5b1d;}
    .down{background:rgba(157,72,57,.12);color:var(--danger);}

    /* ── DOWNLOADS ── */
    .download-list{display:grid;gap:10px;}
    .download-item{
      padding:12px;border:1px solid rgba(35,75,43,.09);border-radius:14px;background:rgba(255,255,255,.72);
      display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;transition:.2s;
    }
    .download-item:hover{border-color:var(--primary-2);background:#fff;}
    .download-item small{display:block;color:var(--muted);margin-top:3px;font-size:.8rem;}
    .footer-note{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:16px;}

    /* ── FOOTER ── */
    footer{padding:22px 0 38px;}
	.footer-card{padding:22px;display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;}
    .footer-card p{margin-bottom:0;color:var(--muted);font-size:.88rem;}
    .footer-links{display:flex;flex-wrap:wrap;gap:10px;}
    .footer-links a{color:var(--primary);font-weight:700;font-size:.88rem;}

    /* ── INFO CARDS ── */
    .info-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:16px;}
    .info-card{background:rgba(255,255,255,.72);border:1px solid rgba(35,75,43,.09);border-radius:16px;padding:16px;}
    .info-card .icon{font-size:1.6rem;margin-bottom:8px;}
    .info-card h4{font-size:.94rem;color:var(--primary);margin-bottom:4px;}
    .info-card p{font-size:.84rem;color:var(--muted);line-height:1.5;margin:0;}
	
	.img_icon{width:30px;height:30px;}

    /* ── RESPONSIVE ── */
    @media(max-width:1180px){
      .hero-grid,.dashboard-grid,.table-grid,.map-layout,.charts-grid{grid-template-columns:1fr;}
      .spark-grid{grid-template-columns:1fr 1fr 1fr;}
    }
    @media(max-width:900px){
      .mobile-toggle{display:inline-flex;}
      .menu{display:none;width:100%;justify-content:flex-start;padding:6px 0 12px;}
      .menu.show{display:flex;}
      .nav{align-items:flex-start;padding:10px 0;flex-wrap:wrap;}
      .search-box,.kpi-grid,.charts-grid,.spark-grid,.footer-note{grid-template-columns:1fr;}
      .bar-row{grid-template-columns:1fr;gap:4px;}
      .table-grid{grid-template-columns:1fr;}
      .info-grid{grid-template-columns:1fr 1fr;}
	  .kpi-grid-5col{grid-template-columns:1fr;}
	  .two_col_grid{grid-template-columns:1fr;}
	  .three_col_grid{grid-template-columns:1fr;}
	  table{font-size:.6rem;}
	  .img_icon{width:15px;height:15px;}
    }
    @media(max-width:680px){
      .hero-card,.side-panel,.table-wrap,.download-panel,.map-shell,.footer-card{padding:16px;}
      h1{font-size:2rem;}
      .section-head{flex-direction:column;align-items:flex-start;}
      .brand-text span{display:none;}
      .info-grid,.footer-card{grid-template-columns:1fr;}
	  table{font-size:.45rem;}
    }
	
	/* ── NAGY DASHBOARD ── */
	.card{background:#fff;border:1px solid #e2e2de;border-radius:10px;padding:.85rem 1rem;margin-bottom:.65rem}
	.sec-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#aaa;margin-bottom:.4rem}
	.group-lbl{font-size:10.5px;color:#999;margin-bottom:.25rem;margin-top:.6rem}
	.group-lbl:first-child{margin-top:0}
	.pills{display:flex;flex-wrap:wrap;gap:.3rem}
	button{font-family:inherit;cursor:pointer;transition:all .12s}
	.spill{border:1.5px solid #ddd;border-radius:20px;padding:3px 10px;font-size:12px;background:#fff;color:#777}
	.spill.on{font-weight:500}
	.spill.no-b{border-style:dashed}
	.vpill{border:1.5px solid #ddd;border-radius:7px;padding:5px 11px;font-size:12px;background:#fff;color:#777}
	.vpill.on{background:#111;color:#fff;border-color:#111;font-weight:500}
	.dpill{border:1.5px solid #ddd;border-radius:20px;padding:3px 10px;font-size:12px;background:#fff;color:#777}
	.dpill.on{border-color:#111;color:#111;font-weight:500}
	.dpill:disabled{opacity:.35;cursor:not-allowed}
	.ctrl-row{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-end}
	.ctrl-sec{display:flex;flex-direction:column;gap:.3rem}
	.chk{display:flex;align-items:center;gap:.35rem;font-size:12px;color:#777;cursor:pointer;padding-bottom:1px}
	.slider-val{min-width:32px;font-size:12px;font-weight:600;color:#555;font-variant-numeric:tabular-nums}
	.dual-range-wrap{display:flex;align-items:center;gap:.55rem}
	.dual-range{position:relative;width:148px;height:22px;flex-shrink:0}
	.range-track-bg{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:4px;background:#ddd;border-radius:2px}
	.range-track-fill{position:absolute;top:50%;transform:translateY(-50%);height:4px;background:#555;border-radius:2px;pointer-events:none}
	.dual-range input[type=range]{position:absolute;width:100%;top:50%;transform:translateY(-50%);margin:0;padding:0;height:4px;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;outline:none}
	.dual-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#444;cursor:pointer;pointer-events:all;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
	.dual-range input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#444;cursor:pointer;pointer-events:all;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
	#cw{position:relative;height:440px;margin-top:.7rem}
	#src-note{font-size:10px;color:#aaa;text-align:right;margin-top:.3rem;padding-right:.2rem;font-style:italic}
	.note{font-size:11px;color:#aaa;margin-top:.55rem;line-height:1.65}
	.warn{font-size:11.5px;color:#b45309;margin-top:.35rem;line-height:1.55;display:none}

	@media(prefers-color-scheme:dark){
	body{background:#232b17;color:#3d5a32}
	.card{background:rgba(255,255,255,.72);border-color:#333}
	.sec-lbl,.group-lbl{color:#666}
	.spill,.vpill,.dpill{background:#2a2a2a;border-color:#3a3a3a;color:#999}
	.vpill.on{background:#eee;color:#111;border-color:#eee}
	.dpill.on{border-color:#ddd;color:#ddd}
	.slider-val{color:#aaa}
	.range-track-bg{background:#3a3a3a}
	.range-track-fill{background:#999}
	.dual-range input[type=range]::-webkit-slider-thumb{background:#bbb;border-color:#2a2a2a}
	.dual-range input[type=range]::-moz-range-thumb{background:#bbb;border-color:#2a2a2a}
	.note{color:#555}
	.warn{color:#d97706}
	#src-note{color:#555}
	}

/* Fixed background */
	.bg-fixed {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: url(images/bg_osz.jpg) no-repeat center center;
	  background-size: cover;
	  z-index: -1; /* Keeps it behind your content */
	  /* This prevents the "jumping" address bar issue on mobile */
	  will-change: transform;
	  opacity:0.05;
	}
	
	/* ── IMAGE OVERLAY ── */	
	/* Lightbox Background Overlay */
	.lightbox {
	  display: none; /* Hidden by default */
	  position: fixed;
	  z-index: 1000; /* Sits on top of everything */
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.8); /* Darkened background */
	  justify-content: center;
	  align-items: center;
	}

	/* The Expanded Image Inside the Lightbox */
	.lightbox img {
	  max-width: 90%;
	  max-height: 90%;
	  border-radius: 4px;
	  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
	}

	/* Close Button */
	.lightbox .close {
	  position: absolute;
	  top: 20px;
	  right: 30px;
	  color: #fff;
	  font-size: 40px;
	  font-weight: bold;
	  cursor: pointer;
	}
	
/* 1. Firefox Scrollbar Styling */
#scroll-container {
  scrollbar-width: 30px; /* Options: auto, thin, none */
  scrollbar-color: #234B2B #f1f1f1; /* Thumb color, Track color */
}

/* 2. WebKit (Chrome, Edge, Safari) Scrollbar Styling */
#scroll-container::-webkit-scrollbar {
  height: 30px; /* Size / thickness of the scrollbar */
}

#scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the track underneath */
  border-radius: 4px;
}

#scroll-container::-webkit-scrollbar-thumb {
  background: #234B2B; /* Color of the draggable scrollbar handle */
  border-radius: 4px;
}

#scroll-container::-webkit-scrollbar-thumb:hover {
  background: #18331d; /* Color when hovering over the scrollbar */
}

.scroll-item {
	flex: 0 0 auto;
	max-width: 90vw;
	background:#ffffff;
	border:1px solid rgba(35,75,43,.5);
	border-radius:20px;
	padding:10px;
	scroll-margin-top: 160px;
	}


/* Back to the top button */
#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Ensures it stays above all other content */
  
  /* Sizing and Shape */
  width: 40px;
  height: 40px;
  line-height: 40px; /* Centers the arrow vertically */
  text-align: center;
  border-radius: 50%;
  
  /* Colors and Typography */
  background-color: #333;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  
  /* Half visible when not hovered */
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Fully visible and changes color on hover */
#backToTopBtn:hover {
  opacity: 1;
  background-color: #000;
}

/* SCROLLING ADJUSTMENT */
#top,#kapcsolat,#vgte,#dashboard,#kiadvanyok,#nyomtatvanyok,#linkek,#cimek {
	scroll-margin-top:80px;
	}
  
  @media(max-width:900px){
	  #top,#kapcsolat,#vgte,#dashboard,#kiadvanyok,#nyomtatvanyok,#linkek,#cimek {scroll-margin-top:150px;}
	  }
	  
  @media(max-width:680px){
	  #top,#kapcsolat,#vgte,#dashboard,#kiadvanyok,#nyomtatvanyok,#linkek,#cimek {scroll-margin-top:150px;}
	  }
	  
/* SMALL SCREEN REORDER */	  
/* Default desktop order (Implicit, or explicitly set to 0) */
@media (max-width: 900px) {
#fokartya { order: 1; }
#oldalkartya1 { order: 2; }
#oldalkartya2 { order: 3; }


/* --- Small Screens (Mobile) --- */
@media (max-width: 680px) {
/* Reorder the boxes using the order property */
  #oldalkartya1 {
    order: 1; /* Appears FIRST on mobile */
  }
  
  #fokartya {
    order: 2; /* Appears SECOND on mobile */
  }
  
  #oldalkartya2 {
    order: 3; /* Appears THIRD on mobile */
  }
}