html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
body { 
    min-height: 100vh; 
    min-width: 100vw; 
    background: #f3f4f6; 
    overflow: hidden; 
}
#app { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
}
#topbar {
  /* A HTML-ben a flex-wrap és a gap kezeli az elrendezést */
  flex-shrink: 0; /* Megakadályozza a zsugorodást */
  background: #fff;
  box-shadow: 0 2px 8px #0001;
  z-index: 20;
}
#mainContentArea {
  display: flex;
  flex: 1 1 0; /* Kitölti a maradék helyet */
  min-height: 0; /* Fontos a flexbox belső görgetéséhez */
  position: relative;
}
/* A bal oldali menü alap stílusa és pozíciója */
#imageSelectionPanel {
    position: absolute; /* Mobilon abszolút pozíció */
    inset-y: 0;
    left: 0;
    transform: translateX(-100%); /* Alapból el van rejtve balra */
    transition: transform 0.3s ease-in-out;
    width: 16rem; /* 256px */
    background-color: #f9fafb; /* gray-50 */
    padding: 0.75rem;
    border-right: 1px solid #e5e7eb; /* border-gray-200 */
    z-index: 40;
    overflow-y: auto;
}
/* A menü látható állapota (mobilon) */
#imageSelectionPanel.open {
    transform: translateX(0);
}
/* Asztali nézetben (md breakpoint felett) a menü relatív és mindig látható */
@media (min-width: 768px) { /* md breakpoint */
    #imageSelectionPanel {
        position: relative;
        transform: translateX(0);
    }
}
#imageList li {
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  word-break: break-word;
  transition: background-color 0.2s;
}
#imageList li:hover {
  background-color: #e5e7eb; /* Tailwind gray-200 */
}
#imageList li.active-image {
  background-color: #bfdbfe; /* Tailwind blue-200 */
  font-weight: 600; /* Tailwind semibold */
  color: #1d4ed8; /* Tailwind blue-700 */
}
#centerarea { 
    flex: 1 1 0; 
    display: flex; 
    min-height: 0; 
    min-width: 0; 
}
#imageArea {
  background: #fff;
  border-radius: 10px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  margin: 1rem;
  overflow: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px #0001;
  z-index: 10;
}
#mainImage {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  user-select: none;
  background: #f9fafb;
  border-radius: 6px;
  transition: transform 0.15s;
}
.marker-ico { position: absolute; transform: translate(-50%,-50%) scale(var(--size,1)); cursor: grab; z-index:10; }
.marker-dot { width:22px; height:22px; border-radius:50%; border:3px solid var(--color,#ef4444); background:white; }
.marker-cross { width:22px; height:22px; }
.marker-cross::before,.marker-cross::after{ content:""; position:absolute; left:50%;top:50%; width:3px;height:100%;background:var(--color,#ef4444); border-radius:1px;}
.marker-cross::before{transform:translate(-50%,-50%) rotate(45deg);}
.marker-cross::after{transform:translate(-50%,-50%) rotate(-45deg);}
.marker-circle { width:24px; height:24px; border-radius:50%; border:3px solid var(--color,#22c55e); background:none; }
.marker-slash { width:20px; height:20px; }
.marker-slash::before{ content:""; position:absolute; left:50%;top:50%; width:3px;height:110%;background:var(--color,#6366f1);border-radius:1px;transform:translate(-50%,-50%) rotate(25deg);}
.marker-triangle { width:22px;height:20px;}
.marker-triangle::before{content:"";display:block;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:17.32px solid var(--color,#f59e42);}
.marker-lomb { width:26px; height:26px; font-size: 24px; line-height: 24px; text-align: center; }
.marker-lomb::after { content:"🌳"; }
.marker-epulet { width:26px; height:26px; font-size: 24px; line-height: 24px; text-align: center; }
.marker-epulet::after { content:"🏠"; }
.marker-veszely { width:26px; height:26px; font-size: 24px; line-height: 24px; text-align: center; }
.marker-veszely::after { content:"⚠️"; }
.tooltip {
  position:absolute; 
  background:rgba(31,41,55,0.93);
  color:#fff;
  padding:8px 14px; 
  border-radius:8px; 
  font-size:14px; 
  white-space:pre-line;
  pointer-events:none; 
  z-index:20; 
  transform:translate(-50%,-120%); 
  min-width:180px; 
  max-width:280px; 
  text-align:left; 
  opacity:0;
  transition:opacity .2s;
  word-wrap: break-word; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.marker-ico:hover .tooltip, .marker-ico:focus .tooltip{ opacity:1;}
.marker-preview { pointer-events: none; opacity: 0.5 !important; filter: blur(0.5px); z-index: 100 !important;}
.marker-locked { opacity: 0.7; filter: grayscale(0.4) blur(0.2px); cursor: not-allowed !important; }
.marker-ico .lock-icon { position: absolute; top: -10px; right: -10px; font-size: 13px; color: #eab308; background: #fff; border-radius: 50%; box-shadow:0 1px 3px #0002; padding: 1px 2px; z-index: 22;}
.zoom-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid #e5e7eb;
    font-size: 1.125rem;
    font-weight: 700;
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dragging { opacity: 0.8; filter: grayscale(0.6); }
.marker-ico:active { cursor: grabbing !important; }
#markerListPanel {
  width: 320px; max-width: 35vw;
  min-width: 220px;
  background: #f9fafb;
  border-left: 1px solid #e5e7eb;
  padding: 1.1rem 0.9rem 1.1rem 1.3rem;
  overflow-y: auto;
  box-shadow: 0 2px 10px #0001;
  z-index: 10;
}
@media (max-width: 1024px) { /* A marker lista csak lg breakpoint felett jelenik meg */
  #markerListPanel { display: none; }
}
.truncate { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#versionPanel {
  padding: 1rem 1.5rem 1rem 0.5rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px #0001;
  position: absolute;
  right: 1.2rem; top: 4.2rem;
  z-index: 50;
  width: 300px;
  min-width: 220px;
  display: none;
}
#versionPanel.active { display: block; }
.pdf-image-label {
  position: absolute;
  left: 100%; 
  top: 50%;
  transform: translateY(-50%) translateX(5px); 
  background-color: rgba(255, 255, 255, 0.85);
  color: black;
  padding: 1px 3px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 15; 
  pointer-events: none; 
}