:root {
      --bg: #F5F6F8;
      --card: #FFFFFF;
      --primary: #1976D2;
      --text: #333;
      --muted: #666;
      --archived: #EEEEEE;
      --card-bg-1: #FFECB3;  /* pasztell sárga */
      --card-bg-2: #C8E6C9;  /* pasztell zöld */
      --card-bg-3: #B3E5FC;  /* pasztell kék */
      --card-bg-4: #E1BEE7;  /* pasztell lila */
      --card-bg-5: #FFCCBC;  /* pasztell korall */
      --text: #333;
      --shadow: rgba(0,0,0,0.1);
      --info: #BBDEFB;      /* Cash Flow blokk */
      --rev: #C8E6C9;       /* Bevétel */
      --cost: #FFCDD2;      /* Kiadás */
      --margin: #FFE0B2;    /* Árrés */
      --profit: #D1C4E9;    /* Haszon */
      --save: #DCEDC8;      /* Megtakarítás */
      --header-bg: #FFE0B2;  /* halvány narancs */
      --light: #FFF3E0;
      --light2: #E3F2FD;
      --header-bg: #FFE082; /* halvány arany a bérköltséghez hasonló */
      --aru-bg: #EF9A9A;    /* halvány piros */
      --uzem-bg: #CE93D8;   /* halvány lila */
      --color-bg: #F5F6F8;
      --color-card: #FFFFFF;
      --color-day: #E3F2FD;
      --color-night: #FFF3E0;
      --color-primary: #1976D2;
      --color-text: #333;
      --color-muted: #666;
      --color-berek: #FFF3E0;
      --color-aruk: #F3E5F5;
      --color-uzemelt: #E8F5E9;

    }
    body {
      margin:0; background:var(--bg);
      font: 16px / 1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
    }
    header {
      background:#1976D2; color:#fff;
      padding:16px; text-align:center;
      font-size:1.5rem;
    }
	
	nav { display: flex; justify-content: center; background: #fff; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }	
    nav a { margin: 0 12px; color: #1976D2; text-decoration: none; font-weight: 500; }
	@media (max-width: 767px) {
      nav { flex-wrap: wrap; }
      nav a { margin: 6px; }
    }
	
    .grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
      gap:16px;
      max-width:1000px; margin:24px auto; padding:0 16px;
    }
    .tile {
      background:var(--card-bg-1);
      border-radius:8px;
      box-shadow:0 2px 6px var(--shadow);
      padding:24px 16px;
      text-align:center;
      cursor:pointer;
      transition:transform .1s,box-shadow .1s;
    }
    .tile h2 {
      margin:0; font-size:1.1rem;
    }
    .tile:nth-child(2) { background:var(--card-bg-2); }
    .tile:nth-child(3) { background:var(--card-bg-3); }
    .tile:nth-child(4) { background:var(--card-bg-4); }
    .tile:nth-child(5) { background:var(--card-bg-5); }
    .tile:hover {
      transform:translateY(-2px);
      box-shadow:0 4px 12px var(--shadow);
    }
    @media(max-width:600px) {
      .grid { gap:12px; }
      .tile { padding:16px 8px; }
    }

    h1 { margin:24px 16px 8px; font-size:1.5rem; }
    .toolbar {
      max-width:1200px; margin:8px auto 24px; padding:0 16px;
      display:flex; justify-content:flex-end;
    }
    .toolbar.btn {
      margin:16px auto; padding:0 16px;
    }
    .toolbar button {
      background:var(--primary); color:#fff;
      border:none; border-radius:4px;
      padding:8px 16px; cursor:pointer; font-size:0.9rem;
    }
    .table-wrap { overflow-x:auto; padding:0 16px 32px; }
    table {
      width:100%; min-width:600px; border-collapse:collapse;
      background:var(--card); margin:0 auto;
      box-shadow:0 2px 4px var(--shadow);
    }
    th, td {
      border:1px solid #DDD; padding:10px; font-size:0.9rem; text-align:left;
    }
    td:first-child,
    th:first-child { text-align:left !important;}
    th { background:#fafafa; position:sticky; top:0; z-index:1; text-align:center; }
    td.actions { text-align:center; }
    tr.archived td { background:var(--archived); color:var(--muted); }
    .btn {
      background:transparent; border:none; cursor:pointer;
      font-size:1rem; color:var(--primary);
    }
    .btn:disabled { color:var(--muted); cursor:default; }
    /* Modal */
    .modal-backdrop {
      display:none; position:fixed; inset:0;
      background:rgba(0,0,0,0.4);
      justify-content:center; align-items:center; z-index:100;	
    }
    .modal {
      background:var(--card); border-radius:8px;
      width:360px; max-width:90%; padding:24px;
      box-shadow:0 2px 12px var(--shadow);
    }
    .modal h2 { margin-top:0; font-size:1.25rem; }
    .modal form { display:flex; flex-direction:column; gap:12px; }
    .modal label { font-size:0.9rem; }
    .modal input, .modal textarea {
      padding:8px; font-size:1rem;
      border:1px solid #CCC; border-radius:4px;
    }
    .modal .footer {
      display:flex; justify-content:flex-end; gap:8px; margin-top:16px;
    }
    .modal .cancel { background:#EEE; color:var(--text); padding:8px 12px; border:none; border-radius:4px; }
    .modal .save   { background:var(--primary); color:#fff; padding:8px 12px; border:none; border-radius:4px; }
     .row-total {
      background:var(--header-bg);
      font-weight:500;
    }
    .text-right td,
    .text-right th {
        text-align: right;
    }
    .text-bold {
        font-weight: 600;
    }
    .table-wrap.noshadow table {
        box-shadow: none;
  }
    @media(max-width:600px){ th, td{padding:6px;font-size:0.8rem;} .toolbar{padding:0 8px;} }

    /* Cash Flow */
     .controls {
    max-width:1200px; margin:16px auto; text-align:right;
  }
  select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px; margin-left:8px;
	font-size: 1.20rem;
  }
  .table-wrap.cash {
    overflow-x:auto; padding:0 8px;
  }
  .table-wrap.cash table {
    width:100%; min-width:700px; border-collapse:collapse;
    margin:16px auto; background:var(--card);  
    box-shadow: none;
  }
  .table-wrap.cash th, .table-wrap.cash td {
    border:1px solid #ddd; padding:10px; font-size:0.9rem;
    text-align:right;
  }
  .table-wrap.cash th {
    position:sticky; top:0; background:#fafafa;
    font-weight:600; text-align:center;
  }
  .table-wrap.cash th:first-child, .table-wrap.cash td:first-child { text-align:left }
  .table-wrap.cash tfoot td {
    background:#f1f7fa; font-weight:600; text-align:right;
  }
  .summary {
    max-width:1200px; margin:24px auto; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:16px; padding:0 8px;
  }
  .card {
    background:var(--card); padding:16px; border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1); text-align:center;
  }
  .card h3 { margin:0 0 8px; font-size:1rem; color:var(--muted); }
  .card p {
    margin:0; font-size:1.25rem; font-weight:600;
  }
  .card.rev  { background:var(--rev); }
  .card.cost { background:var(--cost); }
  .card.margin { background:var(--margin); }
  .card.profit { background:var(--profit); }
  .card.save { background:var(--save); }
  @media(max-width:600px) {
    th, td { padding:6px; font-size:0.8rem; }
    .controls { font-size:0.9rem; }
  }

  /* Felhasználók */
   .table-wrap.felhasznalok {
      overflow-x:auto; padding:0 16px 24px;
    }
    .table-wrap.felhasznalok table {
      width:100%; min-width:800px;
      border-collapse:collapse;
      background:var(--card);
      margin:0 auto;
      box-shadow: none;
    }
    .table-wrap.felhasznalok th, .table-wrap.felhasznalok td {
      border:1px solid #DDD;
      padding:10px 12px;
      font-size:0.9rem;
      text-align:left;
    }
    .table-wrap.felhasznalok th {
      background:#F0F0F0; position:sticky; top:0; z-index:1;
    }
    .table-wrap.felhasznalok td.actions {
      text-align:center;
    }
    .table-wrap.felhasznalok td.archived {
      background:var(--archived); color:var(--muted);
    }
    @media(max-width:600px) {
    .table-wrap.felhasznalok th, .table-wrap.felhasznalok td { padding:6px; font-size:0.8rem; }
    .controls { font-size:0.9rem; }
  }
  
    #credentials {
     display: block;
	}

	#credentials label,
	#credentials input {
	  display: block;
	  width: 100%;
	  margin-bottom: 8px;
	}


  /* Havi bevétel lotto */
   .row-total.lotto { background:var(--light); font-weight:500; }
   .table-wrap.lotto tfoot td {
    background:#f1f7fa; font-weight:600; text-align:right;
  }
  .table-wrap.lotto table {
    box-shadow: none;
  }

  /* Havi bevétel nem lotto */
  .row-total.nemlotto { background:var(--light2); font-weight:500; }
  .table-wrap.nemlotto table {
    box-shadow: none;
  }
   .table-wrap.nemlotto tfoot td {
    background:#f1f7fa; font-weight:600; text-align:right;
  }

  /* Havi kiadások */
  /* Színkódolt header cellák */
  th.dolgozo   { background:var(--header-bg); }
  th.aru-kp    { background:var(--aru-bg); }
  th.aru-bank  { background:var(--aru-bg); }
  th.uzemetes  { background:var(--uzem-bg); }
   .table-wrap.havikiadas tfoot td {
    background:#f1f7fa; font-weight:600; text-align:right;
  }
  .table-container {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 auto;
    padding: 0 8px 24px;
}
 .table-container tfoot td {
    background:#f1f7fa; font-weight:600; text-align:right;
  }
   .table-container table  {
    box-shadow: none;
  }

  /* Költségtípusok */
  .koltsegtipusok th {
    background: #fafafa;
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: center !important;
}

/* Login */
  .container.login { background-color:#fff; width:400px; max-width:90%; margin:100px auto; padding:32px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); text-align:center; }
  .container.login img { width:150px; margin-bottom:24px; }
  .container.login label { display:block; text-align:left; margin-bottom:8px; font-size:0.875rem; }
  .container.login input { max-width: 100%; width: 93%; padding:12px; margin-bottom:16px; border:1px solid #ccc; border-radius:4px; font-size:1rem; }
  .container.login input:focus { outline:none; border:2px solid #1976D2; }
  .container.login button { width:100%; padding:12px; font-size:1rem; background-color:#1976D2; color:#fff; border:none; border-radius:6px; cursor:pointer; }
  .container.login button:hover { background-color:#1565C0; }
  .container.login .links { margin-top:16px; font-size:0.875rem; }
  .container.login .links a { color:#1976D2; text-decoration:none; margin:0 8px; }
  .container.login .links a:hover { text-decoration:underline; }
  @media (max-width: 767px) {
    .container.login { margin:50px auto; padding:16px; }
    .container.login img { width:120px; margin-bottom:16px; }
  }

/* Main version a */
    .main_a header { background-color: #1976D2; color: #fff; padding: 16px; text-align: center; }
    /*
	.main_a nav { display: flex; justify-content: center; background: #fff; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .main_a nav a { margin: 0 12px; color: #1976D2; text-decoration: none; font-weight: 500; }
	*/
    .main_a .container { display: flex; flex-wrap: wrap; justify-content: center; padding: 16px; max-width: 1200px; margin: auto; }
    .main_a .tile { background: #fff; width: 180px; height: 120px; margin: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; cursor: pointer; }
    .main_a .tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    /*
	@media (max-width: 767px) {
       .main_a .tile { width: 45%; margin: 8px; }
    }
	*/

/* Main version b */
    .main_b header { background-color: #1976D2; color: #fff; padding: 16px; text-align: center; }
    /*
	.main_b nav { display: flex; justify-content: center; background: #fff; padding: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .main_b nav a { margin: 0 12px; color: #1976D2; text-decoration: none; font-weight: 500; }
	*/
    .main_b main { padding: 24px; text-align: center; }
    .main_b main h1 { font-size: 1.5rem; margin-bottom: 16px; }
    /*
	@media (max-width: 767px) {
      .main_b nav { flex-wrap: wrap; }
      .main_b nav a { margin: 6px; }
    }
	*/

/* Napi bevétel */
  body.napi_bevetel {
      margin:0; background: var(--color-bg);
      font-family: 'Roboto', sans-serif; color: var(--color-text);
    }
    .napi_bevetel header {
      text-align:center; padding:16px;
      background: var(--color-primary); color:#fff;
      font-size:1.5rem;
    }
    .napi_bevetel .date-global {
      text-align:center; margin-top:16px;
      font-size:1rem; color: var(--color-muted);
    }
    .napi_bevetel .wrapper {
      display:flex; flex-wrap:wrap;
      max-width:1200px; margin:12px auto;
      gap:16px; align-items:flex-start;
    }
    .napi_bevetel .block {
      background: var(--color-card);
      border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.08);
      flex:1; min-width:300px;
      display:flex; flex-direction:column;
    }
    .napi_bevetel .block-header {
      padding:12px 16px; font-weight:500;
      border-bottom:1px solid #e0e0e0;
      font-size:1.1rem;
    }
    .napi_bevetel .block.day   { background: var(--color-day); }
    .napi_bevetel .block.night { background: var(--color-night); }
    .napi_bevetel .block table {
      width:100%; border-collapse:collapse; flex:1;
      background: none;
      box-shadow: none;
      min-width: auto;
    }
    .napi_bevetel th, .napi_bevetel td {
      padding:8px 12px; border-bottom:1px solid #ececec;
      font-size:0.9rem; text-align:left; border: none;
    }
    .napi_bevetel th { background: var(--color-card); }
    .napi_bevetel tfoot td {
      font-weight:600; background:#f1f7fa;
      border-top:2px solid var(--color-primary);
    }
    .napi_bevetel .actions {
      padding:8px 16px; text-align:right;
      border-top:1px solid #e0e0e0;
    }
    .napi_bevetel .actions button {
      background: var(--color-primary); color:#fff;
      border:none; border-radius:4px;
      padding:6px 12px; font-size:0.9rem;
      cursor:pointer;
    }
    /* Modal */
    .napi_bevetel .modal-backdrop {
      display:none; position:fixed; inset:0;
      background:rgba(0,0,0,0.4);
      justify-content:center; align-items:center;
      z-index:100;
    }
    .napi_bevetel .modal {
      background:#fff; border-radius:8px;
      width:400px; max-width:90%; padding:24px;
    }
    .napi_bevetel .modal h2 { margin-top:0; font-size:1.2rem; }
    .napi_bevetel .modal form { display:flex; flex-direction:column; gap:12px; }
    .napi_bevetel .modal label { font-size:0.9rem; }
    .napi_bevetel .modal input, .napi_bevetel .modal select {
      padding:8px; font-size:1rem;
      border:1px solid #ccc; border-radius:4px;
	  margin: 0;
      width: 100%;
    }
    .napi_bevetel .modal .footer {
      display:flex; justify-content:flex-end; margin-top:16px;
    }
    .napi_bevetel .modal .footer button {
      margin-left:8px; padding:8px 14px; border:none; border-radius:4px;
      font-size:0.9rem; cursor:pointer;
    }
    .napi_bevetel .modal .footer .cancel { background:#eee; color:var(--color-text); }
    .napi_bevetel .modal .footer .save   { background:var(--color-primary); color:#fff; }

    @media(max-width:767px) {
      .napi_bevetel .wrapper { flex-direction:column; }
      .napi_bevetel .modal { width:100%; height:100%; border-radius:0; padding:16px; }
    } 

    /* Napi kiadás */
    body.napikiadas {
    margin:0; background: var(--color-bg);
    font-family: 'Roboto',sans-serif; color: var(--color-text);
  }
  .napikiadas header {
    text-align:center; padding:16px;
    background: var(--color-primary); color:#fff;
    font-size:1.5rem;
  }
  .napikiadas .date-global {
    text-align:center; margin-top:16px;
    font-size:1rem; color: var(--color-muted);
  }
  .napikiadas .wrapper {
    display:flex; flex-wrap:wrap;
    max-width:1200px; margin:12px auto;
    gap:16px; align-items:flex-start;
  }
  .napikiadas .block {
    background: var(--color-card);
    border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.08);
    flex:1; min-width:260px;
    display:flex; flex-direction:column;
  }
  .napikiadas .block-header {
    padding:12px 16px; font-weight:500;
    border-bottom:1px solid #e0e0e0;
    font-size:1.1rem;
  }
  .napikiadas .block.berek    { background: var(--color-berek); }
  .napikiadas .block.aruk     { background: var(--color-aruk); }
  .napikiadas .block.uzemelt  { background: var(--color-uzemelt); }
  .napikiadas .block table {
    width:100%; border-collapse:collapse; flex:1;
    box-shadow: none;
    background: none;
    min-width: auto;
    max-width: none;
    
  }
  .napikiadas th, .napikiadas td {
    padding:8px 12px; border-bottom:1px solid #ececec !important;
    font-size:0.9rem; text-align:left; border: none;
  }
  .napikiadas th { background: var(--color-card); border: none;}
  .napikiadas tfoot td {
    font-weight:600; background: #f1f7fa;
    border-top:2px solid var(--color-primary) !important;
    border: none;
  }
  .napikiadas .actions {
    padding:8px 16px; text-align:right;
    border-top:1px solid #e0e0e0;
  }
  .napikiadas .actions button {
    background: var(--color-primary); color:#fff;
    border:none; border-radius:4px;
    padding:6px 12px; font-size:0.9rem;
    cursor:pointer;
  }
  .napikiadas .modal-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.4);
    justify-content:center; align-items:center;
    z-index:100;
  }
  .napikiadas .modal {
    background:#fff; border-radius:8px;
    width:400px; max-width:90%; padding:24px;
  }
  .napikiadas .modal h2 { margin-top:0; font-size:1.2rem; }
  .napikiadas .modal form { display:flex; flex-direction:column; gap:12px; }
  .napikiadas .modal label { font-size:0.9rem; }
  .napikiadas .modal input, .napikiadas .modal select {
    padding:8px; font-size:1rem;
    border:1px solid #ccc; border-radius:4px;
    margin: 0;
    width: 100%;
  }
  .napikiadas .modal .footer {
    display:flex; justify-content:flex-end; margin-top:16px;
  }
  .napikiadas .modal .footer button {
    margin-left:8px; padding:8px 14px; border:none; border-radius:4px;
    font-size:0.9rem; cursor:pointer;
  }
  .napikiadas .modal .footer .cancel { background:#eee; color:var(--color-text); }
  .napikiadas .modal .footer .save   { background:var(--color-primary); color:#fff; }

  @media(max-width:767px) {
    .napikiadas .wrapper { flex-direction:column; }
    .napikiadas .modal { width:100%; height:100%; border-radius:0; padding:16px; }
  }

  /* Nyitó adatok */
   .nyitoadatok th:first-child {
    text-align: center !important;
}

  /* Üzleti adatok */
   .uzletiadatok th:first-child {
    text-align: center !important;
}

.form-row.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;        /* kis hézag label és input között */
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.form-row.center label {
  margin: 0;          /* ha van default margó */
  text-align: right;
}

.form-row.center input {
  /* opcionális: fix szélesség, ha kell */
  /* width: 150px; */
}


.input-group {
  display: inline-flex;
  align-items: center;
}
.input-group .unit {
  margin-left: 6px;
  font-weight: bold;
}

/* Eye toggle – fix középre, 38×38 */
.toggle-arch{
  position: relative;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--accent);
  background: var(--accent);   /* kék háttér, hogy a fehér ikon látszódjon */
  border-radius: 10px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 8px;
  line-height: 0;              /* baseline ne toljon */
  box-sizing: border-box;
  color: #fff;                 /* <-- ikon színe (currentColor) = FEHÉR */
}

/* csak az ikon mérete, abszolút közép */
.toggle-arch svg{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  display: block;
  pointer-events: none;        /* katt csak a gombra menjen */
  /* ikon fehér: az alábbi két sorral mindent felülírunk */
  fill: currentColor;
  stroke: currentColor;
}

/* ha az SVG-ben vannak path/circle elemek fix színnel, ez is kényszeríti a fehéret */
.toggle-arch svg path,
.toggle-arch svg circle {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ON/OFF váltás */
.toggle-arch .eye-off { display: none; }
.toggle-arch.is-on .eye-on { display: none; }
.toggle-arch.is-on .eye-off { display: block; }

/* állapot-visszajelzés (opcionális) */
.toggle-arch:hover { filter: brightness(1.05); }
.toggle-arch:active { transform: translateY(1px); }
.toggle-arch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }