/* ----- Holder and Annotator Block ----- */
#img-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px;
  margin-top: 26px;
  padding: 0 12px;
}

.img-annot-block {
  border: 1.5px solid #e3e7ef;
  border-radius: 19px;
  padding: 23px 18px 23px 18px;
  background: #f8fafc;
  box-shadow: 0 3px 22px rgba(32, 40, 80, 0.13);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 1100px;
  min-width: 320px;
  width: 100%;
  margin: 14px auto;
}

/* ----- Image Container: True ratio, no distortion ----- */
.img-annot-imgbox {
  position: relative;
  width: 100%;
  background: #f4f7fb;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4/3;
  min-height: 260px;
  max-height: 510px;
}

.img-annot-imgbox img,
.img-annot-imgbox canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  border-radius: 0;
  z-index: 1;
}

.img-annot-imgbox canvas {
  pointer-events: auto;
  z-index: 2;
  background: transparent !important;
}

.img-annot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: #f2f5fb;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 13px 8px 13px;
  border-radius: 15px 15px 0 0;
  margin-bottom: 6px;
  min-height: 41px;
  z-index: 12;
  position: relative;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  color: #374151; /* darker gray */
}

.img-annot-toolbar button,
.img-annot-toolbar select {
  padding: 8px 13px;
  font-size: 16px;
  border-radius: 9px;
  border: 1.3px solid #c4c9d7;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.16s, border-color 0.13s, color 0.13s;
  outline: none;
  min-width: 38px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
  box-shadow: 0 2px 11px #00000009;
  user-select: none;
  color: #374151;
}

.img-annot-toolbar button i {
  font-size: 16px;
  color: #374151 !important; /* gray icon */
}

.img-annot-toolbar button:hover,
.img-annot-toolbar button:active {
  background: #e0e7ef;
  border-color: #a3b2d6;
}

.img-annot-toolbar button.active-tool {
  background: #e6f0fa !important;
  border: 1.7px solid #2563eb !important;
  color: #2563eb;
}

.img-annot-toolbar button.active-tool i {
  color: #2563eb !important;
}

.img-annot-toolbar .delete-hint {
  margin-left: 14px;
  color: #d02;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.img-annot-toolbar .zoom-level {
  margin-left: 12px;
  font-size: 15px;
  font-weight: bold;
  color: #2563eb;
}

.img-annot-toolbar .color-picker,
.img-annot-toolbar .width-picker {
  margin-left: 4px;
  margin-right: 7px;
  vertical-align: middle;
  min-width: 38px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #c4c9d7;
  cursor: pointer;
}

.img-annot-toolbar button.active-tool {
  background: #e6f0fa !important;
  border: 1.7px solid #2563eb !important;
  color: #2563eb;
}

.img-annot-toolbar button.tool-btn svg {
  pointer-events: none;
}

.img-annot-toolbar .color-picker,
.img-annot-toolbar .width-picker {
  margin-left: 3px;
  margin-right: 7px;
  vertical-align: middle;
  min-width: 38px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #c4c9d7;
  cursor: pointer;
}

.img-annot-toolbar .delete-hint {
  margin-left: 14px;
  color: #d02;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  letter-spacing: 0.02em;
}

.img-annot-toolbar .zoom-level {
  margin-left: 12px;
  font-size: 16px;
  color: #2563eb;
  font-weight: bold;
}

.img-annot-capture {
  margin-top: 13px;
}
.img-annot-toolbar .tool-btn {
  color: #374151 !important; /* label text */
}

.img-annot-toolbar .tool-btn i {
  color: #374151 !important; /* icon color */
}

.img-annot-toolbar .tool-btn .label {
  font-size: 14.2px;
  font-weight: 500;
  color: #374151 !important;
}

/* ---- TOOLBAR: Soft colored backgrounds ---- */
.img-annot-toolbar button.draw-btn.tool-btn { background: #f4e5ff !important; }
.img-annot-toolbar button.point-btn.tool-btn { background: #e5f6fe !important; }
.img-annot-toolbar button.line-btn.tool-btn { background: #eef7fd !important; }
.img-annot-toolbar button.rect-btn.tool-btn { background: #fef6e5 !important; }
.img-annot-toolbar button.circle-btn.tool-btn { background: #e7ffe5 !important; }
.img-annot-toolbar button.move-btn.tool-btn { background: #f5f8ff !important; }
.img-annot-toolbar button.delete-btn.tool-btn { background: #ffeaea !important; }
.img-annot-toolbar button.pan-btn.tool-btn { background: #e6e6fa !important; }
.img-annot-toolbar button.zoom-in-btn.tool-btn { background: #e9f6ff !important; }
.img-annot-toolbar button.zoom-out-btn.tool-btn { background: #f2f4fc !important; }
.img-annot-toolbar button.reset-btn.tool-btn { background: #eceef5 !important; }
.img-annot-toolbar button.rotate-l-btn.tool-btn,
.img-annot-toolbar button.rotate-r-btn.tool-btn { background: #e8f8ff !important; }
.img-annot-toolbar button.flip-h-btn.tool-btn,
.img-annot-toolbar button.flip-v-btn.tool-btn { background: #f2fff6 !important; }
.img-annot-toolbar button.snapshot-btn.tool-btn { background: #ffffff !important; }
.img-annot-toolbar button.clear-btn.tool-btn { background: #ffe6e6 !important; }

/* ---- POPUP: Note entry ---- */
#overlay-input {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: rgba(255,255,255,0.99);
  border: 1.5px solid #b8c1c6;
  border-radius: 16px;
  padding: 18px 19px 17px 19px;
  box-shadow: 0 7px 32px 0 #0003, 0 1.5px 10px #3b82f6a6;
  position: absolute;
  z-index: 3333;
  width: 260px;
  min-height: 100px;
  font-size: 16.2px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  pointer-events: auto;
  transition: box-shadow 0.16s, border 0.13s;
  animation: fadeInUp 0.22s cubic-bezier(.17,.67,.32,1.26);
  right: auto; /* يدعم RTL */
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(19px);}
  to { opacity: 1; transform: translateY(0);}
}

#overlay-input .drag-header {
  cursor: move;
  font-weight: 700;
  color: #324056;
  padding-bottom: 5px;
  font-size: 16.3px;
  border-bottom: 1.2px solid #eee;
  margin-bottom: 4px;
  user-select: none;
  letter-spacing: 0.02em;
}

#overlay-input input,
#overlay-input select {
  font-size: 15.4px;
  border-radius: 7px;
  border: 1.2px solid #a6b1bb;
  box-sizing: border-box;
  padding: 8px;
  width: 100%;
  margin: 0;
  background: #fafbff;
}

#overlay-input button {
  margin-top: 4px;
  padding: 8px 18px;
  font-size: 15.2px;
  border-radius: 9px;
  border: none;
  background: #2563eb;
  color: #fff;
  transition: background 0.13s, opacity 0.13s;
  cursor: pointer;
  box-shadow: 0 2px 7px #0002;
  display: inline-block;
  font-weight: 600;
}

#overlay-input button:last-child {
  background: #f3f4f6;
  color: #333;
  border: 1.2px solid #c2cbe6;
}

#overlay-input button:hover {
  opacity: 0.94;
}

#overlay-input .button-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 13px;
}

/* Responsive: Smaller screens */
@media (max-width: 900px) {
  .img-annot-block {
    width: 99vw;
    min-width: 200px;
    padding: 8px 2px 10px 2px;
  }
  .img-annot-toolbar button,
  .img-annot-toolbar select {
    font-size: 13.5px;
    min-height: 25px;
    padding: 5px 3px;
    min-width: 24px;
    height: 27px;
  }
  .img-annot-toolbar .color-picker,
  .img-annot-toolbar .width-picker {
    min-width: 25px;
    height: 27px;
  }
  #overlay-input {
    width: 97vw;
    min-width: 140px;
    font-size: 13.7px;
    padding: 11px 4vw 14px 4vw;
    left: 1vw !important;
    right: 1vw !important;
  }
}