/* assets/style.css */

:root{

  --nav-green:#14b86a; /* Champion NAV zöld logo */

  --bg:#0e1420;

  --card:#151d2c;

  --text:#ffffff;

  --muted:#9fb0c3;

  --blue:#2b86ff;      /* gombok kékek */

  --blue-600:#1f6be0;

  --white:#fff;

  --danger:#ff5d5d;

}



*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0; background:linear-gradient(180deg,#0a111c,#0e1420 40%,#0f1624);

  color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;

}

a{color:inherit;text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:24px}

.nav{

  position:sticky;top:0;z-index:10;

  background:rgba(10,17,28,.7); backdrop-filter: blur(10px);

  border-bottom:1px solid #1e2a3d;

}

.nav-inner{display:flex;align-items:center;gap:18px;padding:14px 24px}

.brand{

  font-weight:800;font-size:20px;letter-spacing:.4px;display:flex;align-items:center;gap:10px

}

.brand .logo{color:var(--nav-green)}

.brand .rest{color:#fff}

.nav-right{margin-left:auto;display:flex;gap:10px;align-items:center}



.btn{

  background:var(--blue); color:#fff; border:0; padding:10px 16px; border-radius:10px;

  font-weight:600; cursor:pointer; transition:.25s ease transform, .25s ease background, .25s ease color, .25s ease box-shadow;

  box-shadow:0 8px 20px rgba(43,134,255,.25);

}

.btn:hover{

  background:#fff; color:#0b1220; transform:translateY(-2px);

  box-shadow:0 12px 28px rgba(255,255,255,.15);

}

.btn-outline{

  background:transparent;border:1px solid var(--blue);color:var(--blue)

}

.btn-danger{background:var(--danger)}

.btn-danger:hover{background:#fff;color:#c01010}



.hero{

  text-align:center; padding:70px 20px 30px

}

.hero h1{font-size:34px;margin:0 0 14px}

.hero p{max-width:850px;margin:10px auto;color:var(--muted);line-height:1.6}



.card{

  background:var(--card); border:1px solid #1e2a3d; border-radius:16px; padding:18px;

  box-shadow:0 10px 30px rgba(0,0,0,.2);

  transition:.25s transform, .25s border-color, .25s box-shadow;

}

.card:hover{ transform:translateY(-4px); border-color:#2a3955; box-shadow:0 18px 40px rgba(0,0,0,.25)}



.grid{display:grid;gap:16px}

.grid-3{grid-template-columns:repeat(3,1fr)}

.grid-2{grid-template-columns:repeat(2,1fr)}

.grid-4{grid-template-columns:repeat(4,1fr)}

@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}

@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}



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

.kpi .num{font-size:32px;font-weight:800}

.kpi small{color:var(--muted)}



.input, select, textarea{

  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a3955;

  background:#0f1624; color:var(--text); outline:none; transition:.2s border-color;

}

.input:focus, select:focus, textarea:focus{border-color:var(--blue)}

.row{display:flex;gap:12px}

.row > *{flex:1}



table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border: none; /* Eltünteti a fehér border-t */
}

th, td {
  padding: 10px;
  border: none; /* Eltünteti a cellák körüli border-t is */
}

.table th,.table td{padding:12px;border-bottom:1px solid #20314a}

.table th{color:#bcd0eb;font-weight:700;text-align:left}

.table .muted{color:var(--muted)}



.box-title{font-size:18px;margin:0 0 10px}

.footer{padding:40px 0;color:#8aa1bd;text-align:center}



.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #2a3955}

.badge.green{border-color:#1fb974;color:#1fb974}

.badge.blue{border-color:#2b86ff;color:#2b86ff}

.badge.gray{border-color:#50607a;color:#9fb0c3}



.feature{

  display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:160px

}

.feature i{font-size:26px;color:#8ac5ff}

.feature:hover i{transform:translateY(-2px)}



    table { width: 100%; border-collapse: collapse; margin-top: 20px; }

    th, td { padding: 10px; border: 1px solid #ccc; }

    .red { color: red; font-weight: bold; }

    .modal {

        display: none;

        position: fixed;

        top: 0; left: 0; width: 100%; height: 100%;

        background: rgba(0,0,0,0.6);

        justify-content: center;

        align-items: center;

    }

    .modal-content {

        background: white;

        padding: 20px;

        border-radius: 8px;

        width: 400px;

    }



    /* Betöltő réteg */

    #loader {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: #000000ff;

      display: flex;

      justify-content: center;

      align-items: center;

      z-index: 9999;

    }



    /* Logó animáció */

    #loader img {

      width: 120px;

      height: auto;

      animation: bounce 2s infinite;

    }



    /* Ugráló animáció */

    @keyframes bounce {

      0%, 100% {

        transform: translateY(0);

      }

      50% {

        transform: translateY(-40px);

      }

    }



    /* Ha betöltött, eltűnik a loader */

    .loaded #loader {

      display: none;

    }



    /* Oldal tartalom */

    .content {

      padding: 40px;

      text-align: center;

    }