:root {
  --bg: #1f1f1f;
  /* --glass: rgba(20,20,20,0.25); */
  --glass: #1f1f1f;
  --border: #3a3a3a;
  --text: #ececec;

  /* AKCENTUS (minimál narancs) */
  --accent: #ff8d3a;
  --accent2: #ffc07a;
  --danger: #ff5252;

  /* ÁRNYÉK / GLOW */
  --shadow: 0 8px 24px rgba(0,0,0,.28);
  --glow-soft: rgba(255,141,58,.22);
  --glow-strong: rgba(255,192,122,.46);
  --notif-glow-soft: rgba(255,141,58,.40);
  --notif-glow-strong: rgba(255,141,58,.80);

  /* SHIMMER / HIGHLIGHT */
  --shimmer-light: rgba(255,255,255,.035);
  --shimmer-strong: rgba(255,255,255,.07);
  --shimmer-hover: rgba(255,141,58,.06);

  /* GRADIENTEK */
  --gradient-accent: linear-gradient(145deg, rgba(255,141,58,.9), rgba(255,192,122,.84));
  --gradient-accent-horizontal: linear-gradient(90deg, rgba(255,192,122,.84), rgba(255,141,58,.9));
  --gradient-active-line: linear-gradient(90deg, transparent, rgba(255,141,58,.72), transparent);
  --gradient-divider: linear-gradient(to bottom, transparent, rgba(255,141,58,.28), transparent);

  /* EGYEBEK */
  --text-shadow-accent: 0 0 6px rgba(255,141,58,.22);
  --text-shadow-hover: 0 0 10px rgba(255,192,122,.33);
  --link-hover-shadow: 0 0 4px rgba(255,192,122,.38), 0 0 8px rgba(255,141,58,.18);

  --dropdown-bg: var(--glass);
  --dropdown-border: var(--border);
  --dropdown-hover-bg: rgba(255,141,58,.08);
  --dropdown-hover-text: var(--text);

  --progress-gradient: linear-gradient(90deg, var(--accent2), var(--accent));
  --user-border: rgba(255,255,255,.08);
  --icon-divider: rgba(255,141,58,.25);
  --icon-hover-border: rgba(255,141,58,.30);

  --opacity-low: .25; --opacity-mid: .55; --opacity-high: .85;


  --topshade-strong: rgba(100,100,100,.55); 
  --topshade-weak:   rgba(70,70,70,.20);  

  /* NAV csíkok (ritkább) */
  --nav-stripe-angle: 30deg;
  --nav-stripe-gap: 7px;
  --nav-stripe-thickness: 1px;
  --nav-stripe-light: rgba(255,255,255,.05);
  --nav-stripe-dark:  rgba(0,0,0,.08);

  /* CARD csíkok (sűrűbb) */
  --card-stripe-angle: 30deg;
  --card-stripe-gap: 7px;
  --card-stripe-thickness: 1px;
  --card-stripe-light: rgba(255,255,255,.055);
  --card-stripe-dark:  rgba(0,0,0,.08);
}

body {
  background-image: url('1/bg-pattern.webp');
  color: var(--text);
  font-family: "Segoe UI", Roboto, sans-serif;
  transition: background .3s ease, color .3s ease;
}

#logo {
  background: url('1/logo.png') center/contain no-repeat,
        linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.35)),
        var(--bg);
}

.navbar{
  position: sticky; top:0; z-index:1000;
  background-color: var(--glass);
}

/* csík réteg (elmaszkolva lefelé) */
.navbar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
	repeating-linear-gradient(
	  var(--nav-stripe-angle),
	  var(--nav-stripe-light) 0,
	  var(--nav-stripe-light) var(--nav-stripe-thickness),
	  var(--nav-stripe-dark)  var(--nav-stripe-thickness),
	  var(--nav-stripe-dark)  var(--nav-stripe-gap)
	);
  /* a csíkokat fentről lefelé elhalványítjuk */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,0) 100%);
		  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,0) 100%);
}

/* felül szürkés árnyalás, lefelé 0 */
.navbar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--topshade-strong) 0%, var(--topshade-weak) 40%, transparent 100%);
}

/* =========================
   CARD-HEADER: sűrűbb csík + felül szürke, alul eltűnik
   ========================= */
.card-header{
  position: relative;
  background-color: var(--glass);
  border-bottom: 1px solid var(--border);
  overflow: hidden; /* biztosan belül maradjanak a rétegek */
}

.card-header::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
	repeating-linear-gradient(
	  var(--card-stripe-angle),
	  var(--card-stripe-light) 0,
	  var(--card-stripe-light) var(--card-stripe-thickness),
	  var(--card-stripe-dark)  var(--card-stripe-thickness),
	  var(--card-stripe-dark)  var(--card-stripe-gap)
	);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
		  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
}

.card-header::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--topshade-strong) 0%, var(--topshade-weak) 40%, transparent 100%);
}

@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))){
  .navbar::before, .card-header::before{ opacity:.45; }
}


.btn-primary{
  position: relative;
  overflow: hidden;
  background: var(--gradient-accent);
  border: 1px solid var(--accent2);
  color: var(--text) !important;
  transition: background .3s ease, color .3s ease, transform .06s ease;
  font-weight: bolder !important;
}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:-1px; 
  border-radius: inherit;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      var(--card-stripe-angle),
      var(--card-stripe-light) 0,
      var(--card-stripe-light) var(--card-stripe-thickness),
      var(--card-stripe-dark)  var(--card-stripe-thickness),
      var(--card-stripe-dark)  var(--card-stripe-gap)
    );
  opacity:.45; 
  transition: opacity .2s ease, background-position .2s linear;
}


@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))){
  .btn-primary::before{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.6) 65%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.6) 65%, rgba(0,0,0,0) 100%);
  }
}

.btn-primary:hover{
  background: var(--gradient-accent-horizontal);
  box-shadow: 0 0 10px var(--glow-strong);
  border:1px solid var(--accent2);
}
.btn-primary:hover::before{
  opacity:.6;
  animation: btn-stripes 1.2s linear infinite; 
}

@keyframes btn-stripes{
  to { background-position: 28px 0; }
}

.btn-primary:active{ transform: translateY(1px); }
.btn-primary:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--glow-soft), 0 0 10px var(--glow-strong);
}

@media (prefers-reduced-motion: reduce){
  .btn-primary:hover::before{ animation: none; }
}

.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  border-color: var(--accent2) !important;
}

.form-control, .form-select {
  background-color: #3e3e3e !important;
  border: 1px solid gray !important;
  color: #eee !important;
  border-radius: 0px;
  transition: all .15s ease-in-out;
}

  .form-control::placeholder {
  color: var(--text) !important;
  opacity: 0.6;
}