/* 
    Created on : Oct 31, 2025, 9:42:31 AM
    Author     : gergo
*/

        body {
            margin: 0px; padding: 0px;
                font-family: fa5-proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;

          background-color: #ffd034;
	  /*background-image: url(img/clickling-startpage-bg.png);*/
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  display: block;
	  width: 100vw;
	  height: 100vh;
	  padding: 0;
	  margin: 0;
	}

        div#loginPanel {
		position: fixed;
		bottom: 5vh;
		left: 50%;
		transform: translateX(-50%);
        }
        div#loggedPanel {
            /*background-color: #ffd034;*/
            /* background-image: url(img/Bluesky_BG_002.png); */
            text-align: center;
	    padding-top: 140px;
            /*position: fixed;
            height: 100%; width: 100%;
            margin-left: auto; margin-right: auto;
            overflow: hidden;
            background-color: white;
            background-position: top center;
            background-repeat: no-repeat;
            background-size: 100% 100%;*/
        }
        div#loginPanel > img {
           /* width: 160px;
            padding-bottom: 40px;*/
        }
        div#loginPanel > a {
            width: fit-content;
            margin-left: auto; margin-right: auto;
        }
        TABLE.auth0_user {
            margin-left: auto; margin-right: auto;
            border-collapse: collapse;
            border: 2px solid gray;
            border-radius: 8px;
            background-color: lightgray;
        }
        TABLE.auth0_user caption {
            background-color: white;
            border: 2px solid gray;
            border-radius: 8px;
        }
        TABLE.auth0_user TD,TH {
            border: 1px solid gray;
            padding: 2px 8px;
            font-size: 11px;
        }
        
        /* induló állapot */
        .animated-imageV {
          position: absolute;
          width: 42vw;
          top: -150px;
          left: 70%;
          transform: translateX(-50%) scale(1.4) rotate(-3deg); /* nagyobb és enyhén döntött */
          opacity: 0.2;
          transition: all 2.6s cubic-bezier(0.22, 1, 0.36, 1); /* "easeOutBack" hatás */
        }

        /* végállapot */
        .animated-imageV.active {
          top: calc(50vh - 1vh);
          left: 50%;
          transform: translateX(-50%) scale(1) rotate(0deg);
          opacity: 1;
        }        
        /* induló állapot */
        .animated-image {
          position: absolute;
          opacity: 0.4;
          width: 36vw;
          top: calc(50vh - 1vh);
          left: 50%;
          transform: translateX(-50%) scale(1);
          animation: appearLOGO 6s ease-in-out forwards;
        }
        
        .intro-pulse {
          opacity: 0;
          transform: scale(1);
          transform-origin: center;
          will-change: opacity, transform;
        }
        .intro-pulse.yes_en {
          animation:
            appear 0s step-end forwards 2.5s,
            pulse 1s ease-in-out forwards 3s;
        }
        .intro-pulse.yes_fr {
          animation:
            appear 0s step-end forwards 3.0s,
            pulse 1s ease-in-out forwards 3.5s;
        }
        .intro-pulse.yes_hu {
          animation:
            appear 0s step-end forwards 3.5s,
            pulse 1s ease-in-out forwards 4.0s;
        }

        @keyframes appear {
          to { opacity: 1; }
        }

        @keyframes appearLOGO {
          0% { opacity: 0.4; }
          85% { opacity: 0.4; transform: translateX(-50%) scale(1); }
          90% { opacity: 0.8; transform: translateX(-50%) scale(1.15); }
          100% { opacity: 1; transform: translateX(-50%) scale(1); }
        }

        @keyframes pulse {
          0%  { transform: scale(1.05); }
          10%  { transform: scale(1.15); }
          100% { transform: scale(1); }
        }       


        #main-container {
            border: 15px solid black;
            border-radius: 120px;
            display: block;
            width: calc(100vw - 50px);
            height: calc(100vh - 20vh + 8vh - 2*26px);
            margin: 10px;
            text-align: center;
        }
        /*    .assist_container > .container:checked { background-color: blue; }*/

        .assist_container {
          /*display: flex;
          gap: 10px;*/
            display: block;
            width: calc(90% - 30px);
            margin-top: 20px;
            text-align: center;
            margin-top: 6px;
            margin-left: auto;
            margin-right: auto;
            padding: 0;
        }

        /* Rejtett rádió input */
        .assist_container input[type="radio"] {
          display: none;
        }

        /* Label alapstílus */
        .assist_container label {
          padding: 5px 20px;
          margin: 2px 6px;
          border-radius: 8px;
          background-color: #eee;
          cursor: pointer;
          transition: all 0.3s ease;
          user-select: none;
          display: inline-block;
        }

        /* Hover */
        .assist_container label:hover {
          background-color: #ddd;
        }

        /* Kijelölt (checked) állapot */
        .assist_container input[type="radio"]:checked + label {
          /*background-color: #007bff;*/
          background-color: orangered;
          color: white;
          /*font-weight: bold;*/
        }

        textarea[name="user_input"] {
            width: calc(80% - 70px - 30px);
        }

        .assist_send {
            height: 94px; vertical-align: top; width: 70px;
        }


#list_container {
    display: inline-block;
    width: 200px;    
    vertical-align: top;
    overflow-y: auto;
    height: calc(85vh - 5px - 2 * 100px);
}        

#list_container .list { list-style: none; padding: 0; margin: 0; }
#list_container .list > li { padding: 8px 10px; border-bottom: 1px solid #eee; cursor: pointer; background-color: orange;  } 
#list_container .list > li:hover { background: #f8fafc; }

#item_container {
  display: inline-block;
  width: fit-content;
  width: calc(100% - 200px - 30px);
  height: calc(85vh - 200px - 30px);
  padding: 6px; padding-top: 0px;
  vertical-align: top;
  overflow-y: auto;
}

#item_container article {
    text-align: left;
}
#item_container article .sortores {
    white-space: pre-line;
}


  .tabs {
    --accent: #4f46e5;
    --border: #e5e7eb;
    --muted:  #6b7280;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   /* max-width: 760px; margin: 2rem auto; */
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    background: #fff;
  }

  /* Rejtett rádiók */
  .tabs input[type="radio"] { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

  /* Fejléc gombsor */
  .tab-head {
    display: grid; grid-auto-flow: column; gap: 0;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
  }
  .tab-btn {
    padding: .9rem 1.1rem; text-align: center; cursor: pointer; user-select: none;
    font-weight: 600; color: var(--muted); position: relative;
  }
  .tab-btn::after { /* alsó aktív jelző */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent;
  }

  /* Panelek */
  .tab-panels { padding: 1.1rem; }
  .tab-panel { display: none; animation: fade .18s ease-in; }
  @keyframes fade { from { opacity: .6; transform: translateY(2px); } }

  /* Aktív állapot a :has() segítségével */
  .tabs:has(#t4:checked) .tab-btn[for="t4"],
  .tabs:has(#t1:checked) .tab-btn[for="t1"],
  .tabs:has(#t2:checked) .tab-btn[for="t2"],
  .tabs:has(#t3:checked) .tab-btn[for="t3"] {
    color: #111827;
  }
  .tabs:has(#t4:checked) .tab-btn[for="t4"]::after,
  .tabs:has(#t1:checked) .tab-btn[for="t1"]::after,
  .tabs:has(#t2:checked) .tab-btn[for="t2"]::after,
  .tabs:has(#t3:checked) .tab-btn[for="t3"]::after {
    background: var(--accent);
  }

  .tabs:has(#t4:checked) .tab-panels [data-tab="t4"],
  .tabs:has(#t1:checked) .tab-panels [data-tab="t1"],
  .tabs:has(#t2:checked) .tab-panels [data-tab="t2"],
  .tabs:has(#t3:checked) .tab-panels [data-tab="t3"] {
    display: block;
  }

  /* Billentyűzhető fókusz a füleknek */
  .tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  
  
  TABLE.assocContent {
    border: 1px;
    font-size: 15px;
    color: black;
    margin-left: 0px;
    border-collapse: collapse;      
  }
  
  TABLE.assocContent TD.key {
      vertical-align:middle; border:1px solid gray; background-color:white; padding:0px 5px;
  }
  
  TABLE.assocContent TD.value {
      text-align:left; border:1px solid gray; background-color:white;
      padding-right: 6px;
  }
  

.gen-voice {
      display: inline-block;
      margin-left: 4px;
      cursor: pointer;
      padding: 1px 3px;
      border:1px solid gray;
      border-radius: 4px;
}


.menu_container > button {
background-image: url(../img/items/empty_orange_linzer.png);
  background-size: 160px 160px;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  height: 175px;
  width: 175px;
  vertical-align: top;
  background-origin: content-box;
  background-color: transparent;
  border: 0px;
  cursor: pointer;
}
.menu_container > button > span {
  font-size: 25px;
  font-variant-caps: all-petite-caps;
  font-weight: bold;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
}

#ai_result-container {
	position: absolute;
	top: 20vh;
	width: 80vw;
	left: 10vw;
	background-color: greenyellow;
	border: 2px solid green;
	border-radius: 8px;
	padding: 12px;
}

#ai-result-container textarea {
	width: calc(100% - 40px);
	height: 60vh;
}


  .myPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    background: white;
    border: 2px solid #333;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: 9999;
    overflow: auto;
    padding: 20px;
  }

  /* Bezáró gomb */
  .myPopup .closeBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: #ff5555;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
  }

  .myPopup .closeBtn:hover {
    background: #cc0000;
  }


  .myAjFn { 
    cursor: pointer;
    display: inline-block;
    padding: .1rem 0.4rem;
    border: 1px solid #ddd;
    border-radius: .3rem;
    /*background-color: lightgray;*/
    background-color: transparent;
  }
  .myAjFn:hover { background:#f7f7f7; }
  .myAjFn.is-loading { opacity:.6; pointer-events:none; }