/* ================================
   GLOBAL TOOL LAYOUT
   ================================ */

/**/
/**/
/**/
/**/
/**/

/* Settings (menu with dropdowns) */
.zy_tool_menu_container_settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zy_tool_menu_step {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.zy_tool_menu_label {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
}

.zy_tool_menu_field {
  display: block;
  min-width: 0;
}

.zy_tool_select {
  padding: clamp(5px, 1.1vw, 8px) clamp(8px, 1.6vw, 12px);
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  line-height: 1.1;
  min-height: 32px;
  box-sizing: border-box;
}

.zy_tool_menu_field select,
.zy_tool_menu_field input,
select[data-zy-select] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(4px, 1vw, 7px) clamp(8px, 1.6vw, 12px);
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  line-height: 1.1;
  min-height: 32px;
}

.zy_tool_shuffle_info {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-top: 6px;
  width: 100%;
}

.zy_tool_menu_container_settings .zy_select_wrapper {
  font-size: clamp(0.88rem, 1vw, 0.96rem);
}

.zy_tool_menu_container_settings .zy_select_wrapper .zy_select_display {
  padding: clamp(4px, 1vw, 7px) clamp(8px, 1.6vw, 12px);
  line-height: 1.1;
  min-height: 32px;
}

.zy_tool_menu_container_settings .zy_select_label {
  line-height: 1.1;
}

.zy_tool_menu_container_settings .zy_select_arrow {
  font-size: 18px;
  line-height: 1;
}

.zy_tool_menu_container_settings .zy_select_option {
  padding: 4px 10px;
  line-height: 1.15;
}

.zy_tool_menu_container_settings .zy_select_list {
  max-height: 220px;
}

/* Viewer shell
   zy_tool_* = statische tool-layout rond de viewer.
   De interne viewer-ui zelf gebruikt zy_pdf_* classes. */
.zy_tool_viewer_container {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.zy_tool_worksheet_container {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  background: #ffffff;
  border: 3px solid #333333;
  border-radius: 15px;
  overflow: hidden;
  box-sizing: border-box;
}

.zy_tool_canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
}

@media (max-width: 700px) {
  .zy_tool_menu_container_settings {
    gap: 10px;
  }

  .zy_tool_menu_step {
    gap: 4px;
  }

  .zy_tool_menu_label {
    font-size: clamp(0.95rem, 3.2vw, 1.05rem);
    line-height: 1.2;
  }

  .zy_tool_menu_field select,
  .zy_tool_menu_field input,
  select[data-zy-select],
  .zy_tool_select {
    padding: 4px 7px;
    font-size: 0.86rem;
    min-height: 28px;
  }

  .zy_tool_menu_container_settings .zy_select_wrapper {
    font-size: 0.86rem;
  }

  .zy_tool_menu_container_settings .zy_select_wrapper .zy_select_display {
    padding: 4px 7px;
    min-height: 28px;
  }

  .zy_tool_menu_container_settings .zy_select_arrow {
    font-size: 16px;
  }

  .zy_tool_menu_container_settings .zy_select_option {
    padding: 3px 8px;
  }

  .zy_tool_menu_container_settings .zy_select_list {
    max-height: 200px;
  }

  .zy_tool_worksheet_container {
    border-radius: 6px;
  }
}

@media (max-width: 420px) {
  .zy_tool_menu_container_settings {
    gap: 8px;
  }

  .zy_tool_menu_step {
    gap: 3px;
  }

  .zy_tool_menu_label {
    line-height: 1.2;
  }

  .zy_tool_menu_field select,
  .zy_tool_menu_field input,
  select[data-zy-select],
  .zy_tool_select {
    padding: 3px 6px;
    font-size: 0.82rem;
    min-height: 26px;
  }

  .zy_tool_menu_container_settings .zy_select_wrapper {
    font-size: 0.82rem;
  }

  .zy_tool_menu_container_settings .zy_select_wrapper .zy_select_display {
    padding: 3px 6px;
    min-height: 26px;
  }

  .zy_tool_menu_container_settings .zy_select_arrow {
    font-size: 15px;
  }

  .zy_tool_menu_container_settings .zy_select_option {
    padding: 2px 6px;
  }

  .zy_tool_menu_container_settings .zy_select_list {
    max-height: 180px;
  }
}